webpack新版本下配置mockjs

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

这篇好文章是转载于：学新通技术网