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 相关文章推荐
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
JQuery自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
jquery通过a标签删除table中的一行的代码
Dec 02 Javascript
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
Node.js操作Firebird数据库教程
Mar 04 Javascript
JQuery用户名校验的具体实现
Mar 18 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
Feb 02 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
如何实现小程序tab栏下划线动画效果
May 18 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 socket(fsockopen)的应用实例分析
2013/06/02 PHP
php中利用str_pad函数生成数字递增形式的产品编号
2013/09/30 PHP
php实现与erlang的二进制通讯实例解析
2014/07/23 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php实现当前页面点击下载文件的简单方法
2016/09/22 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
javascript IE中的DOM ready应用技巧
2008/07/23 Javascript
Jquery从头学起第四讲 jquery入门教程
2010/08/01 Javascript
jQuery Validate表单验证入门学习
2015/12/18 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
基于Vue2.X的路由和钩子函数详解
2018/02/09 Javascript
vue data对象重新赋值无效(未更改)的解决方式
2020/07/24 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
Python文档生成工具pydoc使用介绍
2015/06/02 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
html5 初试 indexedDB(推荐)
2016/07/21 HTML / CSS
英国儿童图书网站:Scholastic
2017/03/26 全球购物
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
外企求职信范文分享
2013/12/31 职场文书
会计学专业求职信
2014/07/17 职场文书
2014年个人工作总结模板
2014/12/15 职场文书
2014会计年终工作总结
2014/12/20 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
Ajax常用封装库——Axios的使用
2021/05/08 Javascript
Pytorch 中net.train 和 net.eval的使用说明
2021/05/22 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
python数字类型和占位符详情
2022/03/13 Python