Appearance
Mock Server
原理
Mock Server 实质上是前端大牛花裤衩
在vue-element-admin
中原创的 Mock 解决方案。它的原理是使用webpack
的devServer
的 Ajax 拦截技术,拦截请求并使用内置的webpack-dev-server
直接返回 Mock 数据。
安装 NPM 依赖
bash
yarn add -D chokidar body-parser chalk mockjs
Mock 目录结构
mock 位于项目根目录
├─ modules 模块存放目录,内部建议与/src/api/下的目录结构一致
│ ├─ role 举例
│ │ ├─ index.js 举例
│ │ └─ routes.js 举例
│ ├─ article.js 举例
│ └─ user.js 举例
├─ index.js 引入模块,只需增减模块的引入,其他无需改动
├─ mock-server.js 服务,无需改动
└─ utils.js 工具,无需改动
mock-server.js
- 项目基于 Vue CLI 4 的话:
完全复制https://gitee.com/mirrors/vue-element-admin/blob/master/mock/mock-server.js即可。
- 项目基于 Vue CLI 5 的话:
上述代码略有修改,将第 46 行:
module.exports = app => {
改成:
module.exports = (middlewares, devServer) => {
const app = devServer.app;
然后将最后一行:
}
改成:
return middlewares;
}
index.js
先从https://gitee.com/mirrors/vue-element-admin/blob/master/mock/index.js复制全部。
然后修改第 4 行至第 7 行,修改成正确的引入即可。
Modules
参考https://gitee.com/mirrors/vue-element-admin/blob/master/mock/article.js设置url
、type
、response
的值即可。
utils.js
完全复制https://gitee.com/mirrors/vue-element-admin/blob/master/mock/utils.js即可。
vue.config.js
- 项目基于 Vue CLI 4 的话:
js
devServer: {
// ...
before: require('./mock/mock-server.js')
},
- 项目基于 Vue CLI 5 的话:
将before
改成setupMiddlewares
。
main.js
- Modules 有修改触发页面热刷新:
js
if (process.env.NODE_ENV === 'development') {
require('../mock/index');
}
- 生产环境使用 Mock 数据:
js
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock');
mockXHR();
}