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

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

一个示例项目