今天在安装json-server时遇到一个问题,build文件里并没有生成dev-server.js文件,

开始是怀疑配置有问题,或者安装不正确,然后重新安装了两三次,还是这样,郁闷。。

通过查询资料得知,新版的vue-cli取消了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替,所以 配置本地访问在webpack.dev.conf.js里配置即可

打开webpack.dev.conf.js,(在build目录下),

在const portfinder = require(‘portfinder’)后添加以下两行代码

const appData = require('./db.json')//加载本地数据文件,这个db.json是你自己自定义新建的文件名,存放路径随你吧,我这里测试就放在build目录里了,最后来解释这个db.json
const seller = appData.seller//获取对应的本地数据,

添加完以上代码继续在此文件里面向下查找devServer:{ }

在这个对象里添加配置,(不要删除或覆盖以前默认配置的值)

比如:(这里直接复制前辈的代码了)

before(app) {
  app.get('/api/seller', (req, res) => {
    res.json({

      errno:0,

      data: seller

    })
  })
},

然后,问题来了,

1、我自己的json数据写在哪里呢,是写在我自己创建的db.json里面吗,我去试了一下,没用。。。尴尬!

2、按照上面的配置完了,浏览localhost:8080/api/seller刷新浏览器没反应

3、localhost:8080/api/seller有反应了结果返回的{"erron":0}

解决

1.对于第一点的问题,经过自己反复测试,db.json里面必须有一对空的{},当然也可以写点数据进去,虽然不报错,但是也不知道有啥作用(本人小菜一枚,也没过多的去研究),但是没有{}肯定是要报错的

2.对于第2点,浏览器没反应的问题,一定要记住,当每更改过webpack.dev.conf.js这个文件或者db.json文件,记得重新 npm run dev

3.对于第3点,相信基本上的人已经看出来了,浏览器返回的{"erron":0}其实就是上面配置的

res.json({

      errno:0,

      data: seller

    })

中的errno:0,那么就将他替换掉自己的json数据就行

res.json({   

  "getNewsList": [
    {
      "id": 1,
      "title": "新闻条目1新闻条目1新闻条目1新闻条目1",
      "url": "http://starcraft.com"
    },
    {
      "id": 2,
      "title": "新闻条目2新闻条目2新闻条目2新闻条目2",
      "url": "http://warcraft.com"
    },
    {
      "id": 3,
      "title": "新闻条3新闻条3新闻条3",
      "url": "http://overwatch.com"
    },
    {
      "id": 4,
      "title": "新闻条4广告发布",
      "url": "http://hearstone.com"
    }
  ],

  data: seller

})

关于新版vue-cli安装json-server在build文件里没生成出dev-server文件的更多相关文章

  1. Vue技术点整理-Vue CLI安装详解

     一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...

  2. CDH版本的oozie安装执行bin/oozie-setup.sh prepare-war,没生成oozie.war?

    不多说,直接上干货! 前期博客 Oozie安装部署 问题描述 bin/oozie-setup.sh prepare-war 解决办法 [hadoop@bigdatamaster bin]$ pwd / ...

  3. Vue Cli安装以及使用

      因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...

  4. Vue CLI安装报错 npm ERR! Exit handler never called!

    安装Vue CLI时报错: npm install –g vue-cli 试了四种办法 1.把全局安装-g放到后面 npm install @vue/cli –g 2.命令行输入 npm 缓存清理命令 ...

  5. vue cli 安装element-ui

    1.安装elment-ui --save 参数:上线打包 MacBookPro:vue_test zhangxm$ npm install element-ui axios --save npm WA ...

  6. .vue文件里引用单独样式和js文件

    style只能引一个,script可以引多个

  7. vue cli创建typescript项目

    使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...

  8. 解决@vue/cli 创建项目是安装chromedriver时失败的问题

    最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...

  9. Vue CLI 介绍安装

    https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...

随机推荐

  1. WTL Picture Control显示图片

    1.在对话框上新建一个Picture Control ID为:IDC_STATIC_IMG 2.添加图片资源ID:IDB_BITMAP1(选中Bitmap点击导入,选择bmp图片资源) 实现: CWi ...

  2. RC振荡电路

    RC振荡电路,由电阻R和电容C构成的适用于产生低频信号的电路 1.原理---简介 RC振荡电路,采用RC选频网络构成,适用于低频振荡,一般用于产生1Hz~1MHz(fo=1/2πRC)的低频信号.对于 ...

  3. Java 继承_Chris

    题目: 编写一个应用程序,创建一个矩形类,类中具有长.宽两个成员变量和求周长的方法.再创建一个矩形类的子类——正方形类,类中定义求面积方法.重写求周长的方法.在主类中,输入一个正方形边长,创建正方形对 ...

  4. 【Bullet引擎】Bullet物理引擎简单说明

    说明 Bullet是一款开源的物理模拟计算引擎,包括刚体.柔体.弹性体等,是世界三大物理模拟引擎之一(包括Havok和PhysX),被广泛应用于游戏开发(GTA5等)和电影(2012等)制作中. Bu ...

  5. Python3(三) 变量与运算符

    一.什么是变量 变量 = [1,2] 二.变量的命名规则 字母,数字,下划线,首字母不能是数字 系统关键字 不能用在变量名中 保留关键字 区别大小写 a=1,   a='1',   a=(1,2),  ...

  6. 大延时情况tcp和udp测试

    环境搭建 使能Ubuntu的IPv6转发功能 root@yanhc-Aspire-4738G:/home/yanhc# cat /proc/sys/net/ipv4/ip_forward root@y ...

  7. Spring源码阅读笔记02:IOC基本概念

    上篇文章中我们介绍了准备Spring源码阅读环境的两种姿势,接下来,我们就要开始探寻这个著名框架背后的原理.Spring提供的最基本最底层的功能是bean容器,这其实是对IoC思想的应用,在学习Spr ...

  8. 3,HDFS原理

    1,HDFS体系结构 ··· HDFS是采用master/slaves即主从结构模型来管理数据的.这种模型主要由四部分组成,分别是Client.NameNode.DataNode.SecondaryN ...

  9. css—动画(transform, transition, animation)

    transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...

  10. centos7安装Elasticsearch及Es-head插件详细教程(图文)

    懒惰了很久,今天来写一下Elasticsearch在centos7上安装教程以及安装过程中可能出现的报错解决方式,有不对的地方,烦请各位看官多多指教! 一.ES安装 1.环境检查 确保有java环境, ...