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 相关文章推荐
简单的无缝滚动程序-仅几行代码
May 08 Javascript
js怎么终止程序return不行换jfslk
May 30 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
codeMirror插件使用讲解
Jan 16 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
jQuery tip提示插件(实例分享)
Apr 28 jQuery
微信小程序开发之animation循环动画实现的让云朵飘效果
Jul 14 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
Vue中使用vee-validate表单验证的方法
May 09 Javascript
js实现双人五子棋小游戏
May 28 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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中常见的缓存技术实例分析
2015/09/23 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
基于jQuery的倒计时插件代码
2011/05/07 Javascript
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
JavaScript中的原始值和复杂值
2016/01/07 Javascript
JQuery ztree带筛选、异步加载实例讲解
2016/02/25 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
vue页面使用阿里oss上传功能的实例(一)
2017/08/09 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
node实现基于token的身份验证
2018/04/09 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[02:44]DOTA2英雄基础教程 钢背兽
2013/12/19 DOTA
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
Linux下多个Python版本安装教程
2018/08/15 Python
numpy.meshgrid()理解(小结)
2019/08/01 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python GUI库图形界面开发之PyQt5布局控件QHBoxLayout详细使用方法与实例
2020/03/06 Python
世界上最大的售后摩托车零配件超市:J&P Cycles
2017/12/08 全球购物
FOREO斐珞尔官方旗舰店:LUNA露娜洁面仪
2018/03/11 全球购物
卫校中专生的自我评价
2014/01/15 职场文书
公证委托书大全
2014/04/04 职场文书
理想演讲稿范文
2014/05/21 职场文书
小学校园广播稿(3篇)
2014/09/19 职场文书
师德师风整改措施
2014/10/24 职场文书
工资证明范本
2015/06/12 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技