一、webpack devServer.before

webpack的devServer.before 可以提供了一个在 devServer 内部的 所有中间件执行之前的自定义执行函数。
故：可以采用此方法来模拟后台数据接口。

说明：

data.json：是mock后台数据的json文件，基本格式为：

{
  "seller": {...},
  "goods": [{...}, {...}, ...],
  "ratings": [{...}, {...}, ...]
}

二、配置(_{直接上配置文件}😀)

webpack的devServer.before配置如下vue.config.js文件

const appData = require('./data.json')  // 导入数据文件
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

module.exports = {
  devServer: {
    before(app, server, compiler) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      })
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      })
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
  }
}

三、使用(_{直接上代码}😀)

axios.get('/api/seller?id=' + this.seller.id).then((res) => {
      this.seller = res.data.data
    })