关于新版vue-cli安装json-server在build文件里没生成出dev-server文件
今天在安装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文件的更多相关文章
- Vue技术点整理-Vue CLI安装详解
一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...
- CDH版本的oozie安装执行bin/oozie-setup.sh prepare-war,没生成oozie.war?
不多说,直接上干货! 前期博客 Oozie安装部署 问题描述 bin/oozie-setup.sh prepare-war 解决办法 [hadoop@bigdatamaster bin]$ pwd / ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- Vue CLI安装报错 npm ERR! Exit handler never called!
安装Vue CLI时报错: npm install –g vue-cli 试了四种办法 1.把全局安装-g放到后面 npm install @vue/cli –g 2.命令行输入 npm 缓存清理命令 ...
- vue cli 安装element-ui
1.安装elment-ui --save 参数:上线打包 MacBookPro:vue_test zhangxm$ npm install element-ui axios --save npm WA ...
- .vue文件里引用单独样式和js文件
style只能引一个,script可以引多个
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
随机推荐
- css: line-height 与box-sizing
css 1.line-hight: 行高line-height,是文本行基线这件的距离,不是字体大小,它确定了各个元素框的高度增加或减少多少. 对于块级元素:定义了元素中文本基线之间的最小距离. li ...
- python书籍推荐以及杂七杂八
黄哥推荐学习Python 10本好书 Python3网络爬虫开发实战 github daily-reading 想对大家说的话 POJ 算法练习 http://openjudge.cn/ http:/ ...
- 基于TensorFlow的MNIST手写数字识别-初级
一:MNIST数据集 下载地址 MNIST是一个包含很多手写数字图片的数据集,一共4个二进制压缩文件 分别是test set images,test set labels,training se ...
- HDU_1175_莫队+逆元
http://acm.hdu.edu.cn/showproblem.php?pid=5145 初探莫队,就是离线排序后的暴力,但是效率大大提高,中间要除法取模,所以用到了逆元. #include< ...
- qt creator源码全方面分析(2-7)
目录 Completing Code 补全代码片段 编辑代码片段 添加和编辑片段 删除片段 重置片段 补全Nim代码 Completing Code 在编写代码时,Qt Creator建议使用属性,I ...
- Go语言实现:【剑指offer】栈的压入、弹出序列
该题目来源于牛客网<剑指offer>专题. 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否可能为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5 ...
- Keras学习系列——神经网络层组件
对Keras提供的对各种层的抽象进行相对全面的概括 1 基础常用层 名称 作用 原型参数 Dense 实现全连接层 Dense(units,activation,use_bias=True, kern ...
- php 全局变量 预定义变量
//$GLOBALS 引用全局作用域中可用的全部变量 $_SERVER['SERVER_ADDR'] 返回运行脚本所在服务器的IP地址 $_SERVER['SERVER_NAME'] 返回运行脚本所在 ...
- golang 自定义接口 和 实现接口
/* 定义: type 接口名 interface{ 方法名(可选:参数列表) 可选:返回值列表 || (可选:返回值列表) } 例:type Writer interface { Write(p [ ...
- Kali Linux初始化
配置SSH 1.将PubKeyAuthtication设置为 yes,同时将注释去除. 2.将PermitRootLogin改为PermitRootLogin yes,同时将注释去除. 3.启动/et ...