[toc]

Vite Plugin Mock使用笔记

介绍

vite-plugin-mock 是一个专为 Vite 设计的插件，用于在本地开发环境中创建 API 的 mock 数据。

vite-plugin-mock 基于 mockjs 或者自定义的 mock 数据逻辑，让开发者在后端 API 未准备好之前就能模拟数据响应，从而保证前端开发的顺利进行。

相比于其他 mock 解决方案，vite-plugin-mock 更加轻量、高效，并且与 Vite 无缝集成，具备优秀的开发体验。

vite-plugin-mock 功能特性

• 本地模拟 API：无需后端接口，轻松模拟各个请求，直接返回 JSON 格式的数据。
• 热更新：支持热更新，修改 mock 数据后无需刷新页面，即可实时查看效果。
• 路径和参数的灵活匹配：支持复杂的路径和参数匹配，使得 API 定义更加灵活。
• 生产环境的控制：提供了开启和关闭 mock 的开关，确保在生产环境中不会使用 mock 数据。

Vite Plugin Mock 官方文档 https://www.viterc.cn/en/vite-plugin-mock.html

安装 vite-plugin-mock

npm install vite-plugin-mock --save-dev

配置

在 vite.config.js 文件中进行配置

import { defineConfig } from 'vite'
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'src/mock',   // Mock 文件存放的目录
        enable: true,           // 开启或关闭mock服务，默认开启
        watchFiles: true,       // 监听 Mock 文件变化
      }),
    ],
  }
})

创建mock文件

在 src 目录下创建 mock 文件夹，用于存放各个 mock 文件。

以 user.mock.js 为例，定义用户相关的 mock 文件。

export default [
  //mock 模拟获取用户信息接口
  {
    url: '/api/shuyx-user/user/userInfo', // 接口路径
    method: 'GET', // 请求方法
    response: () => {
      // 模拟响应数据
      return {
          code: 200,
          data: {
              userId: 178,
              orgId: 1,
              positionId: 4,
              userName: "admin",
              passWord: "******",
              gender: "0",
              birthday: "2024-04-03",
              avatar: "xxxx.jpg",
              email: "admin@example.com",
              phone: "1827XXXXXXX",
              status: "0",
              createTime: "2024-04-16T10:05:36.000+08:00",
              updateTime: "2024-04-16T10:05:36.000+08:00"
          },
          message: "请求成功"
      }
    }
  },
];

使用Mock

vite-plugin-mock的工作原理

• 项目启动之后，vite-plugin-mock 会自动拦截所有的请求，判断是否是 mock 文件中定义的接口路径。
• 如果是，就会根据mock 文件定义的响应逻辑返回模拟的数据。
• 如果不是，就会正常发送请求到后端。

注意

我们可以通过配置中的 enable 选项来开启或关闭 mock 服务。默认情况下，enable 选项为 true，即开启 mock 服务。

如果我们不希望在生产环境中使用 mock 数据，或者在开发环境中临时关闭 mock 服务，就可以将 enable 选项设置为 false。