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
})