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

Posted 2020-11-01 龚平

今天在安装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

})

完