vue项目mock数据方案之一：webpack的devServer.before

一、webpack devServer.before

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

详情可查看：webpack官方中文文档-开发服务器(DevServer)

说明：

以下所述“配置”和“使用”均是在vue-cli@3.0.5脚手架生成的vue项目中的案例。
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
    })