Mock 配置完整教程

陈林梓
3 阅读4分钟

基于 vite-plugin-mock + mockjs，适用于 Vite + Vue3 项目。

一、本项目 Mock 是怎么工作的（逐步拆解）

第 1 步：安装依赖

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

package.json 中对应：

"devDependencies": {
  "mockjs": "^1.1.0",
  "vite-plugin-mock": "^3.0.2"
}

放在 devDependencies 是因为 mock 只在开发阶段使用，不会打包进生产代码。

第 2 步：新增 .env.mock 环境文件

在项目根目录创建 .env.mock：

NODE_ENV = development
VITE_APP_MODE = development
VITE_APP_MOCK = true

关键是 VITE_APP_MOCK = true，这个变量会在 vite 配置里被读取，用来决定是否开启 mock。

其他 .env 文件（如 .env、.env.test）不设置这个变量，所以默认不开启 mock。

第 3 步：在 package.json 添加启动命令

"scripts": {
  "serve": "vite --mode development",
  "serve:mock": "vite --mode mock"
}

--mode mock 告诉 Vite 加载 .env.mock 文件，从而让 VITE_APP_MOCK=true 生效。

第 4 步：在 vite.config.ts 注册插件

import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())

  return {
    plugins: [
      // ... 其他插件
      viteMockServe({
        mockPath: './src/mock',       // mock 文件所在目录
        enable: command === 'serve' && env.VITE_APP_MOCK === 'true', // 仅开发模式且变量为 true 时启用
        logger: true                  // 控制台打印 mock 请求日志
      })
    ]
  }
})

逻辑说明：

  • command === 'serve'：只在 vite dev 时生效，vite build 时绝对不会开启
  • env.VITE_APP_MOCK === 'true'：读取 .env.mock 里的变量，字符串比较
  • 两个条件都满足才启用，保证 mock 不会污染构建产物

第 5 步：创建 mock 文件结构

src/mock/
├── index.ts          # 汇总入口，把所有模块合并导出
├── utils.ts          # 公共响应结构工具函数
└── modules/
    └── test.ts       # 按业务模块拆分的 mock 数据

第 6 步：utils.ts — 统一响应结构

// src/mock/utils.ts

export const ResultEnum = {
  SUCCESS: 200,
  SUCCESSMESSAGE: '操作成功',
  ERROR: -1,
  ERRMESSAGE: '请求失败'
}

// 成功响应
export function resultSuccess(data, { code = ResultEnum.SUCCESS, msg = ResultEnum.SUCCESSMESSAGE } = {}) {
  return { code, data, msg }
}

// 失败响应
export function resultError({ code = ResultEnum.ERROR, data = null, msg = ResultEnum.ERRMESSAGE } = {}) {
  return { code, data, msg }
}

这样所有 mock 接口的响应格式都和真实后端保持一致。

第 7 步：modules/xxx.ts — 编写 mock 接口

// src/mock/modules/test.ts
import { resultSuccess } from '../utils.ts'

export default [
  {
    url: '/mock/ums/log/login/list',  // 拦截的请求路径
    method: 'post',
    response: () => {
      return resultSuccess({
        pageNum: 1,
        pageSize: 10,
        total: 14,
        list: [
          {
            id: 643445,
            adminName: 'carlshi',
            loginTime: '2024-12-10 15:48:24'
          }
        ]
      })
    }
  }
]

第 8 步：index.ts — 汇总所有模块

// src/mock/index.ts
import test from './modules/test'

const mocks = [...test]
export default mocks

每新增一个业务模块，在这里 import 并展开进数组即可。

第 9 步：启动 mock 模式

npm run serve:mock

启动后，控制台会打印被拦截的请求路径（因为配置了 logger: true），浏览器发出的匹配请求会被 mock 数据响应，不会真正打到后端。

二、迁移到其他项目的完整步骤

1. 安装依赖

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

2. 新建 .env.mock

NODE_ENV = development
VITE_APP_MOCK = true
# 其他你项目需要的环境变量照抄 .env 即可

3. package.json 加脚本

"serve:mock": "vite --mode mock"

4. vite.config.ts 注册插件

import { viteMockServe } from 'vite-plugin-mock'

// 在 plugins 数组里加入：
viteMockServe({
  mockPath: './src/mock',
  enable: command === 'serve' && env.VITE_APP_MOCK === 'true',
  logger: true
})

确保顶部已经有：

import { defineConfig, loadEnv } from 'vite'
// defineConfig 回调要接收 { command, mode }
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd())
  // ...
})

5. 复制 mock 目录结构

把以下三个文件复制到新项目的 src/mock/ 下：

文件作用
utils.ts统一响应结构，一般不需要改
index.ts模块汇总入口
modules/example.ts示例模块，按需修改

6. 按业务新增 mock 模块

在 src/mock/modules/ 下新建文件，例如 user.ts：

import { resultSuccess, resultError } from '../utils.ts'

export default [
  // GET 接口示例
  {
    url: '/api/user/info',
    method: 'get',
    response: () => resultSuccess({ id: 1, name: 'admin', role: 'superAdmin' })
  },
  // POST 分页列表示例
  {
    url: '/api/user/list',
    method: 'post',
    response: ({ body }) => {
      // body 可以拿到请求参数
      console.log('请求参数:', body)
      return resultSuccess({
        total: 100,
        pageNum: body.pageNum ?? 1,
        pageSize: body.pageSize ?? 10,
        list: [{ id: 1, name: 'test user' }]
      })
    }
  },
  // 模拟失败响应
  {
    url: '/api/user/delete',
    method: 'post',
    response: () => resultError({ msg: '无权限操作' })
  }
]

然后在 index.ts 里注册：

import test from './modules/test'
import user from './modules/user'  // 新增

const mocks = [...test, ...user]   // 展开合并
export default mocks

7. 运行验证

npm run serve:mock

打开浏览器，触发对应接口，控制台应该能看到类似：

[vite-plugin-mock] mock: POST /api/user/list

说明 mock 拦截成功。

三、常见问题

Q：mock 没有生效，请求还是打到真实后端？

  • 检查 .env.mock 里 VITE_APP_MOCK 是否为字符串 true（不是布尔值）
  • 检查启动命令是否用的 serve:mock 而不是 serve
  • 检查 url 是否和前端请求路径完全一致（包括前缀）

Q：能不能在普通 serve 模式下也开启 mock？

可以，在 .env 里加上 VITE_APP_MOCK = true 即可，但不推荐，容易忘记关掉。

Q：mock 数据能用 mockjs 随机生成吗？

可以，直接在 response 里使用：

import Mock from 'mockjs'

response: () => resultSuccess(Mock.mock({
  'list|10': [{
    'id|+1': 1,
    name: '@cname',
    email: '@email'
  }],
  total: 100
}))

Q：如何模拟接口延迟？

viteMockServe 支持 timeout 字段：

{
  url: '/api/slow',
  method: 'get',
  timeout: 2000,  // 延迟 2 秒响应
  response: () => resultSuccess({ data: 'slow response' })
}
avatar
文章
阅读
粉丝