vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法


Posted in Javascript onApril 17, 2019

由于最新版本的vue-cli已经放弃dev-server.js,需在webpack.dev.conf.js配置才行

新版本的webpack.dev.conf.js配置如下:

const express require('express')
const app =express()
var appData = require('..data.json')
var seller = appData.seller
var goods = appData.goods
var ratings = appData.ratings
var apiRoutes = express.Router()
app.use('/api', apiRoutes)

找到devServer后,在最后面添加:

before(app) {
   app.get('/api/appData',function(req,res){
    res.json({
     errno:0,
     data:appData
    })
   }),
   app.get('/api/seller',function(req,res){
    res.json({
     errno:0,
     data:seller
    })
   }),
   app.get('/api/goods',function(req,res){
    res.json({
     errno:0,
     data:goods
    })
   }),
   app.get('/api/ratings',function(req,res){
    res.json({
     errno:0,
     data:ratings
    })
   })
  }

最后一定要重启才会生效,因为修改了配置文件,重新跑一次npm run dev.

打开路径 http://localhost :8080/api/appData就能请求到数据

打开 http://localhost :8080/api/seller 能请求到seller相关数据

如图:

vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法

总结

以上所述是小编给大家介绍的vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Flash对联广告的关闭按钮讨论
Jan 30 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery使用技巧简单汇总
Apr 18 Javascript
jQuery Ajax使用实例
Apr 16 Javascript
论JavaScript模块化编程
Mar 07 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
关于function类中定义变量this的简单说明
May 28 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
Sep 18 Javascript
详解webpack与SPA实践之开发环境搭建
Dec 18 Javascript
JS函数内部属性之arguments和this实例解析
Oct 07 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
Vue插件之滑动验证码
Sep 21 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 #Javascript
Vue项目路由刷新的实现代码
Apr 17 #Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 #Javascript
详解vue开发中调用微信jssdk的问题
Apr 16 #Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 #Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 #Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 #Javascript
You might like
PHP实时显示输出
2008/10/02 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
PHP 获取远程网页内容的代码(fopen,curl已测)
2011/06/06 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
关于javascript中的parseInt使用技巧
2009/09/03 Javascript
封装好的一个万能检测表单的方法
2015/01/21 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
基于javascript实现九宫格大转盘效果
2020/05/28 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
jQuery实现简单的计时器功能实例分析
2017/08/29 jQuery
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
JS实现统计字符串中字符出现个数及最大个数功能示例
2018/06/04 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
Python生成验证码实例
2014/08/21 Python
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python scrapy增量爬取实例及实现过程解析
2019/12/24 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
python3.7添加dlib模块的方法
2020/07/01 Python
Python urllib库如何添加headers过程解析
2020/10/05 Python
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
Boden澳大利亚官网:英国在线服装公司
2018/08/05 全球购物
教师求职自荐信
2014/03/09 职场文书
书法兴趣小组活动总结
2014/07/07 职场文书
2016十一国庆节慰问信
2015/12/01 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
MySQL系列之十二 备份与恢复
2021/07/02 MySQL