vite 使用 vite-plugin-mock 和 mockjs 配置 mock 模式

当后端还没有完全弄好，而前端需要同时启动的时候，一般会使用 mock 模拟后端响应，这样在后端接口准备完成之后，前端能以较小的工作量和接入接口，完成生产开发。

最近正好尝试了一下，记录一下配置过程。

一、下载和安装

vite 可以使用 vite-plugin-mock 插件，配合 mockjs 完成项目的 mock 配置。所以我们需要下载两个东西：vite-plugin-mock 和 mockjs

注意！

目前最新的 vite-plugin-mock 是 3.0.0，如果直接下载会是最新的版本。但是因为ES特性的更改，3.0以上的版本会出现 require 相关的问题，所以需要降低版本，不然会报错：ReferenceError: require is not defined

错误相关的问题可以看这

npm install mockjs vite-plugin-mock@2.9.6

二、配置 vite 的 mock 模式

在 vite.config.js 文件中引入对应插件：

import { defineConfig} from 'vite'
import { viteMockServe } from 'vite-plugin-mock'...plugins: [vue(),viteMockServe({mockPath: './src/mock'})]

其中我们可以看到，mock 插件可以有一些配置，其中 mockPath 指的是 mock 接口存放位置，例如我这里将 mock 内容都放置在根目录中的src目录下的mock目录中。

除了mockPath这个配置，还有一些别的配置项可以选择：

{mockPath?: string;ignore?: RegExp | ((fileName: string) => boolean);watchFiles?: boolean;enable?: boolean;ignoreFiles?: string[];configPath?: string;
}

mockPath
- type: string
- default: mock
- 设置模拟.ts 文件的存储文件夹
- 如果watchFiles：true，将监视文件夹中的文件更改。并实时同步到请求结果
- 如果 configPath 具有值，则无效
ignore
- type: RegExp | ((fileName: string) => boolean);
- default: undefined
- 自动读取模拟.ts 文件时，请忽略指定格式的文件
watchFiles
- type: boolean
- default: true
- 设置是否监视mockPath对应的文件夹内文件中的更改
enable
- type: boolean
- default: true
- 是否启用 mock 功能
configPath
- type: string
- default: vite.mock.config.ts
- 设置模拟读取的数据条目。当文件存在并且位于项目根目录中时，将首先读取并使用该文件。配置文件返回一个数组
logger
- type: boolean
- default: true
- 是否在控制台显示请求日志

三、写 mock 接口

自己写一些接口，当在 mock 模式下，向这些接口发送的请求会被 vite 自动拦截，并返回接口定义的返回值。

还记得我们在一开始，配置 vite-plugin-mock 的时候传入了一个 mockPath 吗，我们去 /src/mock 下创建一个 index.js：

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
import MockMethod from './api'export function setupProdMockServer() {createProdMockServer([...MockMethod])
}

然后在 src/mock 下创建一个 api.js：

export default [{url: '/mock/api/test', //请求地址method: 'get', //请求方式response: () => {return {code: 200,msg: 'ok',data: Math.floor(Math.random() * 30) + 1}},},
]

解释一下我们干了什么事：

首先，在 src/mock/index.js 中我们实现了一个函数，其中使用了 createProdMockServer 函数，并传入了一个数组。接下来，当我们使用接口发送请求的时候，vite 都会帮我们检查这个接口请求的地址是不是在 mock 中配置过的，检查的范围就是 createProdMockServer 中传递的这个数组，只有将配置好的接口传入到这里，才会生效。

然后我们在 api.js 中定义了一个示例接口，这个接口的配置是一个对象形式，我写得只是一个简单的示例，在发送地址为/mock/api/test的请求的时候，会返回一个范围在 0-30 之间的随机数。

mock接口的具体字段选项如下：

{// 请求地址url: string;// 请求方式method?: MethodType;// 设置超时时间timeout?: number;// 状态吗statusCode?:number;// 响应数据（JSON）response?: ((opt: { [key: string]: string; body: Record<string,any>; query:  Record<string,any>, headers: Record<string, any>; }) => any) | any;// 响应（非JSON）rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
}