美文网首页
vue-cli配置mock数据

vue-cli配置mock数据

作者: 疯狂的冰块 | 来源:发表于2018-02-21 20:11 被阅读87次

    旧版本vue-cli参考如下文章:
    【最简单版】vue-cli项目中怎么mock数据

    因为最新版本的vue-cli已经放弃dev-server.js,只需在webpack.dev.conf.js配置就行
    新版vue-cliwebpack.dev.conf.js配置如下:

    原文地址:
    vue-cli的build的文件夹下没有dev-server.js文件,怎么配置mock数据

    在const portfinder = require(‘portfinder’)后添加

    const express = require('express')
    const app = express()
    var appData = require('../mock/goods.json')//加载本地数据文件
    var apiRoutes = express.Router()
    app.use('/api', apiRoutes)
    

    //然后文件中找到devServer,在里面添加

     before(app) {
          app.get('/api/appData', (req, res) => {
            res.json({
              errno: 0,
              data: appData
            })//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
          })
        }
    

    然后npm run dev,一定要重启 一下!!然后就可以http://localhost:8080/api/appData 访问了

    截图如下

    image.png image.png image.png

    相关文章

      网友评论

          本文标题:vue-cli配置mock数据

          本文链接:https://www.haomeiwen.com/subject/povotftx.html