webpack5+vue怎么mock数据？

虽然现在使用vite的比较多，但有一些存在的项目还是使用的webpack作为开发打包工具，当我们使用webpack5时如何mock接口数据呢

安装依赖

"mockjs": "^1.1.0",
"webpack": "^5.88.2",

修改vue.config.js

proxy: {
  setupMiddlewares: require('./mock/index')
}

新建mock文件夹添加index文件

const fs = require('fs')
const path = require('path')
const Mock = require('mockjs')

function getJsonFile(filePath) {
  const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
  return json
}
module.exports = function (middlewares, devServer) {
  const arr = [
    {
      name: 'test',
      path: '/test',
      middleware: (req, res) => {
        let json = getJsonFile('./test.json')
        // mock的接口数据
        res.send(Mock.mock(json))
      }
    },
  ]
  middlewares.unshift(...arr) // 注意不要改变middlewares的堆空间指针的指向
  return middlewares
}

添加test.json

{
  "status": 0,
  "msg": "请求成功",
  "data": {
  }
}