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 在线压缩和格式化收藏
Jan 16 Javascript
JS获取并操作iframe中元素的方法
Mar 21 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
JQuery中DOM事件合成用法实例分析
Jun 13 Javascript
JavaScript中的splice方法用法详解
Jul 20 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
微信小程序中顶部导航栏的实现代码
Mar 30 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
webpack实现一个行内样式px转vw的loader示例
Sep 13 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 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
PHP脚本的10个技巧(5)
2006/10/09 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
PHP.ini安全配置检测工具pcc简单介绍
2015/07/02 PHP
PHP5.3连接Oracle客户端及PDO_OCI模块的安装方法
2016/05/13 PHP
PHP实现批量删除(封装)
2017/04/28 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
点图片上一页下一页翻页效果
2008/07/09 Javascript
javascript 上下banner替换具体实现
2013/11/14 Javascript
JavaScript计时器示例分析
2015/02/05 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
分享javascript计算时间差的示例代码
2020/03/19 Javascript
sencha ext js 6 快速入门(必看)
2016/06/01 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
vue.js实现备忘录demo
2019/06/26 Javascript
vue使用i18n实现国际化的方法详解
2019/09/05 Javascript
js实现简单的打印表格
2020/01/15 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
浅谈JSON5解决了JSON的两大痛点
2020/12/14 Javascript
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
python获取array中指定元素的示例
2019/11/26 Python
详解Python流程控制语句
2020/10/28 Python
selenium+python实现基本自动化测试的示例代码
2021/01/27 Python
Melissa香港官网:MDreams
2016/07/01 全球购物
大整数数相乘的问题
2012/07/22 面试题
2014年质检工作总结
2014/11/26 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
电气工程师岗位职责
2015/02/12 职场文书
初中英语教师个人工作总结2015
2015/07/21 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
在windows server 2012 r2中安装mysql的详细步骤
2022/07/23 Servers