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 相关文章推荐
JavaScript多图片上传案例
Sep 28 Javascript
详解Javacript和AngularJS中的Promises
Feb 09 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
Nov 13 Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
Dec 23 jQuery
JQuery+drag.js上传图片并且实现图片拖曳
Nov 18 jQuery
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
html5 录制mp3音频支持采样率和比特率设置
Jul 15 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
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获取网络上文件
2006/10/09 PHP
thinkphp模板继承实例简述
2014/11/26 PHP
php限制ip地址范围的方法
2015/03/31 PHP
Zend Framework缓存Cache用法简单实例
2016/03/19 PHP
PHP观察者模式原理与简单实现方法示例
2017/08/25 PHP
PHP设计模式(四)原型模式Prototype实例详解【创建型】
2020/05/02 PHP
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
JS给swf传参数的实现方法
2016/09/13 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
JS实现区分中英文并统计字符个数的方法示例
2018/06/09 Javascript
vue实现城市列表选择功能
2018/07/16 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
python 实现归并排序算法
2012/06/05 Python
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
销售员求职个人的自我评价
2014/02/19 职场文书
会计专业个人自我鉴定
2014/03/21 职场文书
企业员工爱岗敬业演讲稿
2014/08/26 职场文书
2014年小学教研工作总结
2014/12/06 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
高一军训口号
2015/12/25 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle
MySQL 如何限制一张表的记录数
2021/09/14 MySQL
python基础之类属性和实例属性
2021/10/24 Python