Skip to content
On this page

Mock Server

原理

Mock Server 实质上是前端大牛花裤衩vue-element-admin中原创的 Mock 解决方案。它的原理是使用webpackdevServer的 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设置urltyperesponse的值即可。

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

杨亮的前端解决方案