新版vuw-cli, mock数据时, 没有dev-server.js

学习慕课网视频的时候, 发现因为vue-cli 版本不同, 导致build下没有 dev-server.js文件

这是因为在新版本中, 原本写在dev-server.js文件中的路由, 新版本中应该写在 webpack.dev.conf.js文件中

首先, 我们将模拟的数据放在自己能找到的位置, 我放在了index.html的同级目录

然后, 我们打开 webpack.dev.conf.js 文件

在 const protfinder = require('portfinder') 下方, 加入如下代码

const appData = require('../data.json')//加载本地数据文件
const seller = appData.seller//获取对应的本地数据
const goods = appData.goods
const ratings = appData.ratings

我们找到 devServer: { }

在最后面加上如下代码:

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

我们关闭node后重新执行 npm run dev

然后访问 http://localhost:8080/api/seller 就能看到数据啦

在这里推荐FEHelper 插件来格式化json数据