vue-admin-template 中 mock-server 的用法

发表于 2020-07-01 更新于 2023-09-22 评论：阅读次数：

简单记录一下 vue-admin-template 中 mock-server 的用法。

最近刚接触一个 vue 项目。发现该项目是基于 vue-admin-template 的，但并没有很好地利用 vue-admin-template 的 Mock Data 功能。这个功能正好能解决我目前的痛点：后台接口预计很久之后才能给到，而缺少接口的情况下前端页面中很多边边角角的工作并不好处理。

所以我了解了下如何使用在 vue-admin-template 中模拟数据。

vue-admin-template 提供两种模拟方式：

本地模拟 - 这是使用 mockjs 进行纯前端模拟。其原理是拦截了所有的请求并代理到本地，然后进行数据模拟。大部分情况下够用，但有几个问题：一是调试工具中看不到网络数据；二是s可能影响依赖 XMLHttpRequest 的库
线上模拟 - 本地启动一个 mock-server 来模拟数据，其模拟数据仍然来自 mockjs

我们重点看线上模拟这种方式。

配置和用法

先安装 mockjs 和 chokidar：

1 2	npm install mockjs npm install chokidar

官方 Wiki 提到的配置方式如下：

proxy: {
  // change xxx-api/login => mock/login
  // detail: https://cli.vuejs.org/config/#devserver-proxy
  [process.env.VUE_APP_BASE_API]: {
    target: `http://localhost:${port}/mock`,
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
},
after: require('./mock/mock-server.js')

但这个文档较旧，跟当前最新源码中的配置有较大差异。源码的配置如下：

devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  before: require('./mock/mock-server.js')
},

注意之前的 after 变成了 before，并且不再需要为 devServer 配置 proxy 了。

之后就可以在 mock 目录下写模拟数据了。

mock 目录下各个文件的作用如下：

mock-server.js - mock-server 的源码
index.js - 引入用到的模拟数据文件
其他 js 文件 - 模拟数据文件

mock 目录下各个文件的依赖关系如下：

1
2
3

mock-server.js
 -> index.js
  -> 其他 js 文件

来看一个实例。

第一步，在 register.js 文件中定义一条模拟数据：

export default [
  {
    url: '/cm/reg/sendcode',
    type: 'post',
    response: config => {
      const items = data.items
      return {
        r: 0,
        msg: 'hello22'
      }
    }
  },
]

第二步，在 index.js 文件引入 register.js：

import register from './register'

const mocks = [
  ...user,
  ...table,
  ...register
]

第三步，在 vue 文件中请求上面定义的模拟数据：

1
2
3

post({
  url: '/cm/reg/sendcode'
})

注意这里的 post() 方法用到一个 axios 实例，该 axios 实例的 baseUrl 为 https://localhost/dev-api。所以模拟请求的目标地址为 https://localhost/dev-api/cm/reg/sendcode。如下图，

-w434

-w428

遇到的问题

mock-server 有一个很赞的功能，每次修改 mock 目录下文件后，mock-server 会执行 hot reload，重新加载最新的数据。如下图，注意可以看到 “Mock Server hot reload success!”

但我遇到一个小坑，无论如何修改 mock 目录下的文件都不会出现 hot reload。

反复检查后发现，我目前开发的这个 vue 项目虽然是基于 vue-admin-template 的，但是将原始工程中的部分源文件路径调整了。其中一个调整是将 mock 调整成 src/mock。

const mockDir = path.join(process.cwd(), 'mock')
...
module.exports = app => {
  // watch files, hot reload mock server
  chokidar.watch(mockDir, {
    ignored: /mock-server/,
    ignoreInitial: true
  }).on('all', (event, path) => { ... })
}

但 mock-server 监听的是 cwd 中的 mock 目录，所以修改 mock 目录中的模拟数据文件后，无法 hot reload。解决办法很简单，调整一下路径，改成监听 cwd 中的 src/mock 目录即可。

const mockDir = path.join(process.cwd(), 'src/mock')
...
module.exports = app => {
  // watch files, hot reload mock server
  chokidar.watch(mockDir, {
    ignored: /mock-server/,
    ignoreInitial: true
  }).on('all', (event, path) => { ... })
}

其他可能遇到的问题见 issues

参考

Mock Data