vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法

 更新时间:2019年04月17日 08:33:01   作者:少年版  
这篇文章主要介绍了vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

由于最新版本的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如何实现iframe的上一步、下一步操作

    Vue如何实现iframe的上一步、下一步操作

    这篇文章主要介绍了Vue如何实现iframe的上一步、下一步操作,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue2首次加载屏幕闪烁问题

    vue2首次加载屏幕闪烁问题

    这篇文章详细介绍了Vue.js项目的基本结构和执行流程,包括index.html、main.js、App.vue和路由配置的关系,特别强调了在index.html中设置BASE_URL和cdn的使用,以及在main.js中使用render函数来减少打包体积
    2025-01-01
  • vue中axios的二次封装实例讲解

    vue中axios的二次封装实例讲解

    在本篇文章里小编给大家整理了关于vue中axios的二次封装实例以及相关知识点总结,需要的朋友们可以学习下。
    2019-10-10
  • vuejs2.0子组件改变父组件的数据实例

    vuejs2.0子组件改变父组件的数据实例

    本篇文章主要介绍了vuejs2.0子组件改变父组件的数据实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue2的todolist入门小项目的详细解析

    vue2的todolist入门小项目的详细解析

    本篇文章主要介绍了vue2的todolist入门小项目的详细解析,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue绑定class的三种方法

    vue绑定class的三种方法

    这篇文章主要介绍了vue绑定class的三种方法,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-12-12
  • vue利用better-scroll实现轮播图与页面滚动详解

    vue利用better-scroll实现轮播图与页面滚动详解

    在我们日常的项目开发中,处理滚动和轮播图是再常见不过的需求了,下面这篇文章主要给大家介绍了关于vue利用better-scroll实现轮播图与页面滚动的相关资料,文中给出了详细的示例代码供大家参考学习,需要的朋友们下面来一起看看吧。
    2017-10-10
  • 使用vue实现滑动滚动条来加载数据

    使用vue实现滑动滚动条来加载数据

    在vuejs中,我们经常使用axios来请求数据,但是有时候,我们请求的数据量很大,那么我们如何实现滑动滚动条来加载数据呢,接下来小编就给大家介绍一下在vuejs中如何实现滑动滚动条来动态加载数据,需要的朋友可以参考下
    2023-10-10
  • vue子页面控制父页面刷新问题

    vue子页面控制父页面刷新问题

    这篇文章主要介绍了vue子页面控制父页面刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • Vue中的循环及修改差值表达式的方法

    Vue中的循环及修改差值表达式的方法

    这篇文章主要介绍了Vue中的循环及修改差值表达式的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论