Vue 开发实践之本地 Mock 数据在前后端分离的开发模式中，Mock 数据是前端开发中很重要的一个环节。有了 Mo

Vue 开发实践为本人的最佳实践，非业内最佳，仅用于提供给各位做参考，这是系列文，但发布时间和内容不固定。

介绍

在前后端分离的开发模式中，Mock 数据是前端开发中很重要的一个环节。

有了 Mock 数据，前端可以不必强依赖后端接口，只需要约定好对应的数据接口，前端可以和后端并行开发，在接口完成后，只需要屏蔽 Mock API 即可，联调成功就可以发布测试。

但如果你的公司使用 rap2，yapi 等 API 管理工具，可以直接忽略本文章，他们都提供了在线 mocks 的功能。

编写 mock 接口

创建目录

在工程的 src/ 下创建一个 mocks 目录，后面所有的 mock 接口都写在这里:

mocks/
    ├── index.js   # 统一出口
    └── data/      # 可以保存 mock 数据为 json

Mock API

目前前端的 Mock 插件，比较熟悉的应该是 mockjs 这个库，虽然作者已经很久没更新，但对于目前开发来说，已经足够使用了，或者试试 better-mock 这个库。

// src/mocks/index.js

import Mock from 'mockjs'

// 为求真实，可以设置 timeout 属性，推荐设置
// See https://github.com/nuysoft/Mock/wiki/Mock.setup()
Mock.setup({
  timeout: '200-600'
})

// 生成 Mock 数据，也可以只用 json 文件代替
const data = Mock.mock({
   // 模板语法 
   // See http://mockjs.com/examples.html
  'users|10': [
    {
      id: '@id',
      realName: '@cname',
    }
  ]
})

// 拦截请求
// See https://github.com/nuysoft/Mock/wiki/Mock.mock()
Mock.mock('/api/users', () => {
  return data.users
})

// 支持传递 HTTP Method
Mock.mock('/api/users', 'GET', () => {
   // ...
})

// 可以作为 HTTP 服务来写
Mock.mock('/api/users', 'GET', (req) => {
   console.log(req.url) // => /api/users?sortBy=createAt
   // ...
})

示例

在入口处引入 mock 文件，功能就会生效了。

// src/main.js

import './mocks'

import Axios from 'axios'

// 发出的请求不会在控制台出现，因为被拦截了
Axios.get('/api/users')

文件拆分

但如果接口太多，文件就会变得很大，难以维护，可以拆分多个文件管理，如:

mocks/
    ├── setup.mock.js         # Mock 配置
    ├── search.mock.js
    └── data/                 # 可以保存 mock 数据为 json

也可以按业务划分的创建子目录，约定 *.mock.js 或 *.mock.ts 结尾，方便动态匹配和识别。

拆分 Mock 配置文件

将 MockJS 的配置拆成 setup.mock.js 文件

// src/mocks/setup.mock.js

import Mock from 'mockjs'

// 为求真实，可以设置 timeout 属性，推荐设置
// See https://github.com/nuysoft/Mock/wiki/Mock.setup()
Mock.setup({
  timeout: '200-600'
})

拆分 Mock API

将 API 拆成 xx.mock.js 文件

// src/mocks/users.mock.js

import Mock from 'mockjs'

// 生成 Mock 数据，也可以只用 json 文件代替
const data = Mock.mock({
   // 模板语法 
   // See http://mockjs.com/examples.html
  'users|10': [
    {
      id: '@id',
      realName: '@cname',
    }
  ]
})

// 拦截请求
// See https://github.com/nuysoft/Mock/wiki/Mock.mock()
Mock.mock('/api/users', () => {
  return data.users
})

自动加载 Mock 文件

借助 webpack 提供的 require.context 自动加载 *.mock.js 文件。

vue-cli 封装了 webpack 工具，所以我们可以直接使用。

// src/main.js

import Axios from 'axios'

// 仅开发启动 Mock 功能
if (process.env.NODE_ENV === 'development') {
   // 如果是 TypeScript 项目，请修改文件后缀 
   const imp = require.context('./mocks', true, /\.mock\.js$/)

   // 循环加载文件
   imp.keys().forEach(key => imp(key))
}
}

// 发出的请求不会在控制台出现，因为被拦截了
Axios.get('/api/users')

在 vite 中使用

Vie 也支持动态导入模块，使用 Glob 导入

// src/main.ts

import Axios from 'axios'

// 仅开发启动 Mock 功能
if (import.meta.env.DEV) {
   import.meta.globEager('./mocks/**/*.mock.ts')
}

// 发出的请求不会在控制台出现，因为被拦截了
Axios.get('/api/users')

Vue 开发实践之本地 Mock 数据

介绍