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 页面内容搜索,类似于 Ctrl+F功能的实现代码
Aug 13 Javascript
jquery 笔记 事件
Nov 02 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
Jan 11 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
Bootstrap table使用方法总结
May 10 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
Vue运用transition实现过渡动画
May 06 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
May 23 Javascript
iview form清除校验状态的实现
Sep 19 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中PDO解决中文乱码问题的一些补充
2010/09/06 PHP
thinkphp3.2中实现phpexcel导出带生成图片示例
2017/02/14 PHP
php数据序列化测试实例详解
2017/08/12 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
splice slice区别
2006/10/09 Javascript
js word表格动态添加代码
2010/06/07 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
JavaScript数组方法大全(推荐)
2016/07/05 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
Ajax跨域实现代码(后台jsp)
2017/01/21 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue中的计算属性实例详解
2018/09/19 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
小程序如何构建骨架屏
2019/05/29 Javascript
vue v-for直接循环数字实例
2019/11/07 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
2020/03/13 Javascript
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python决策树分类算法学习
2017/12/22 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python实现 版本号对比功能的实例代码
2019/04/18 Python
python 读取数据库并绘图的实例
2019/12/03 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
Python xlrd/xlwt 创建excel文件及常用操作
2020/09/24 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
美国一站式电动和手动工具商店:International Tool
2020/11/26 全球购物
运动会入场词60字
2014/02/15 职场文书
《愚公移山》教学反思
2014/02/20 职场文书
程序员求职信
2014/04/16 职场文书
《搭石》教学反思
2016/02/18 职场文书
新店开业策划方案怎么书写?
2019/07/05 职场文书