webpack新版本中间件发生了变化,before与after已经不能使用,代替的onBeforeSetupMiddleware与onAfterSetupMiddleware也要废弃,合二为一成为了setupMiddlewares,setupMiddlewares代替了before与after,所以mockjs在配置时也发生了变化。
下面是mockjs部分,主要就是devServer.app.get变成了middlewares.unshift
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
/**
* @param {string} filePath
*/
function getJsonFile(filePath) {
let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
return json
}
//重点部分,middlewares就是新增加的,原本只有devServer。
module.exports = function (middlewares, devServer) {
//middlewares.unshift就是之前的before,middlewares.push是after
middlewares.unshift({
name: 'mock',
// `path` 是可选的
path: '/user/userInfo',
middleware: (req, res) => {
let json = getJsonFile('./userinfo.json') //mock数据的样式,自己新建。
res.send(Mock.mock(json))
},
})
//return别忘了
return middlewares
}
vue.config.js部分变成了setupMiddlewares
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
setupMiddlewares: require('./src/mock/index.js'),
},
})
新版本之前
const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')
/**
* @param {string} filePath
*/
function getJsonFile(filePath) {
let json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
return json
}
module.exports = function (devServer) {
devServer.app.get('/user/userInfo', (req, res) => {
let json = getJsonFile('./userinfo.json')
res.send(Mock.mock(json))
})
}
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
onBeforeSetupMiddleware: {
setupMiddlewares: require('./src/mock/index.js'),
},
})
目前的新版本还是可以用这个的,但是文档显示该配置项已弃用,以支持 devServer.setupMiddlewares。
{
"id": "@id()",
"username": "@cname()",
"date": "@date()",
"avatar": "@image('200x200','red','#fff','avatar')",
"description": "@paragraph()",
"ip": "@ip()",
"email": "@email()"
}