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 相关文章推荐
js下用eval生成JSON对象
Sep 17 Javascript
浅析用prototype定义自己的方法
Nov 14 Javascript
Js实现手机发送验证码时按钮延迟操作
Jun 20 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
angular bootstrap timepicker TypeError提示怎么办
Jun 13 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
NestJs 静态目录配置详解
Mar 12 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 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
用Apache反向代理设置对外的WWW和文件服务器
2006/10/09 PHP
聊天室php&mysql(三)
2006/10/09 PHP
PHP 类相关函数的使用详解
2013/05/10 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP 中常量的知识整理
2017/04/14 PHP
php服务器的系统详解
2019/10/12 PHP
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
Javascript 静态页面实现随机显示广告的办法
2010/11/17 Javascript
ParseInt函数参数设置介绍
2014/01/02 Javascript
Nodejs异步回调的优雅处理方法
2014/09/25 NodeJs
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
Angular2 Service实现简单音乐播放器服务
2017/02/24 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
jQuery实现web页面樱花坠落的特效
2017/06/01 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
通过说明与示例了解js五种设计模式
2019/06/17 Javascript
Python中循环引用(import)失败的解决方法
2018/04/22 Python
对python 生成拼接xml报文的示例详解
2018/12/28 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
python同时遍历两个list用法说明
2020/05/02 Python
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
教师实习期自我鉴定
2013/10/06 职场文书
教师简历自我评价
2014/02/03 职场文书
车队安全员岗位职责
2015/02/15 职场文书
客户付款通知书
2015/04/23 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
2016年元旦寄语
2015/08/17 职场文书
2016年大学生实习单位评语
2015/12/01 职场文书
小学班级管理心得体会
2016/01/07 职场文书
《海上日出》教学反思
2016/02/23 职场文书