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 相关文章推荐
jquery中获得$.ajax()事件返回的值并添加事件的方法
Apr 15 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
Oct 29 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
Feb 26 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
js类中的公有变量和私有变量
2008/07/24 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
创建公共调用 jQuery Ajax 带返回值
2012/08/01 Javascript
使用JS 清空File控件的路径值
2013/07/08 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
javascript学习笔记(八)正则表达式
2014/10/08 Javascript
jQuery可见性过滤器:hidden和:visibility用法实例
2015/06/24 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
jQuery 3.0 的 setter和getter 模式详解
2016/07/11 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
2018/04/20 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
如何用JS模拟实现数组的map方法
2020/07/30 Javascript
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Django中URL的参数传递的实现
2019/08/04 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
python实现名片管理器的示例代码
2019/12/17 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
CSS3实现简易版的刮刮乐效果
2016/09/27 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
阳光体育活动方案
2014/02/16 职场文书
同学聚会主持词
2014/03/18 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2014年销售员工作总结
2014/12/01 职场文书
中小学教师继续教育心得体会
2016/01/19 职场文书