Vue 3 中如何配置 Mock 数据：Mock.js 与 vite-plugin-mock 方案对比

在Vue 3项目开发中，前端页面往往需要等待后端接口就绪才能进行联调，这严重拖慢了开发进度。Mock数据技术允许前端在接口未完成时模拟后端响应，实现并行开发。本文将深入介绍Vue 3生态中两种主流Mock方案：Mock.js和vite-plugin-mock，涵盖它们的安装、配置、使用方式以及适用场景。

为什么需要Mock数据？

现代Web开发普遍采用前后端分离架构，前端通过HTTP请求与后端API交互。但在实际项目中，前后端开发进度往往不一致，后端接口可能尚未编写完成，或者接口字段定义频繁变更。如果前端必须等待真实接口就绪才能开发页面，会导致大量时间浪费在等待和联调上。Mock数据的思想是在前端本地模拟API响应，让前端开发者可以独立于后端进行开发、调试和测试。

Mock数据不仅能解决开发进度不匹配的问题，还能帮助前端提前验证各种边界情况。例如，后端可能返回空数组、null值、超长字符串或者错误状态码，使用Mock工具可以模拟这些异常响应，让前端代码在开发阶段就具备健壮性。此外，在演示或原型设计中，Mock数据可以快速搭建出可交互的页面，方便产品经理和设计师验证交互流程。

在Vue 3项目中，实现Mock数据的方式有多种，比如手写模拟数据并拦截请求、使用第三方Mock库、或者借助构建工具插件。其中Mock.js和vite-plugin-mock是两种常见且实用的方案，它们各有特点，适用于不同的开发场景。

使用Mock.js拦截请求

Mock.js是一个独立的JavaScript库，它通过拦截浏览器中的XMLHttpRequest对象来模拟API响应。当页面发起Ajax请求时，Mock.js会检查请求的URL和请求方法，如果匹配到预先定义的Mock规则，就返回模拟数据，而不会真正发送网络请求。这种方式不依赖任何构建工具，可以在纯前端项目中单独使用，也可以集成到Vue、React等框架中。

在Vue 3项目中使用Mock.js非常简单。首先通过npm安装依赖：npm install mockjs --save-dev。然后创建一个Mock配置文件，例如src/mock/index.js，在其中定义接口规则。最后在应用入口文件main.js中引入该配置，Mock规则就会在开发环境中生效。需要注意的是，Mock.js只应该在开发环境引入，生产环境必须移除，否则真实请求会被拦截。

下面是一个基本的Mock.js配置示例，它模拟了一个获取用户信息的GET接口和一个提交表单的POST接口：

// src/mock/index.js
import Mock from 'mockjs'

// 模拟获取用户列表
Mock.mock('/api/users', 'get', {
  code: 200,
  message: 'success',
  'data|5-10': [{
    'id|+1': 1,
    'name': '@cname',
    'email': '@email',
    'age|18-60': 1,
    'address': '@county(true)'
  }]
})

// 模拟用户登录，接收参数并返回不同结果
Mock.mock('/api/login', 'post', (options) => {
  const { username, password } = JSON.parse(options.body)
  if (username === 'admin' && password === '123456') {
    return {
      code: 200,
      message: '登录成功',
      token: 'mock-token-123456'
    }
  }
  return {
    code: 401,
    message: '用户名或密码错误'
  }
})

// 设置响应延迟，模拟真实网络环境
Mock.setup({
  timeout: '200-600'
})

在main.js中引入这个文件即可：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './mock' // 引入Mock配置，开发环境使用

const app = createApp(App)
app.mount('#app')

Mock.js的优点在于使用灵活，可以生成随机数据（如中文姓名、邮箱、地址等），支持正则匹配URL，还能通过函数动态返回响应。不过它也有一些不足：Mock.js直接修改了全局XMLHttpRequest对象，可能导致某些第三方库行为异常；并且它不提供热更新能力，修改Mock规则后需要手动刷新页面。此外，在TypeScript项目中，Mock.js的类型支持较弱，需要额外编写类型声明。

使用vite-plugin-mock提供更便捷的Mock方案

vite-plugin-mock是一个专为Vite构建工具设计的插件，它利用Vite开发服务器的中间件机制来拦截请求，而无需修改浏览器原生对象。该插件深度集成Vite，支持热更新、TypeScript、环境变量控制等特性，使用体验比单独使用Mock.js更加顺畅。在Vue 3 + Vite的项目中，推荐优先考虑vite-plugin-mock。

安装vite-plugin-mock和Mock.js（作为数据生成依赖）：npm install vite-plugin-mock mockjs --save-dev。然后在项目根目录创建mock文件夹，用于存放Mock接口定义文件。最后在vite.config.js或vite.config.ts中配置插件。下面是一个完整的配置示例：

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

export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: 'mock', // mock文件所在目录，默认为mock
      enable: true,     // 开发环境启用
      watchFiles: true, // 监听文件变化，自动热更新
      logger: true      // 在控制台显示请求日志
    })
  ]
})

在mock目录下创建接口文件，例如mock/user.ts。vite-plugin-mock支持导出数组或返回数组的函数，每个Mock对象包含url、method、response等字段。下面是一个使用TypeScript编写的示例，其中利用Mock.js生成随机数据：

// mock/user.ts
import { MockMethod } from 'vite-plugin-mock'
import Mock from 'mockjs'

export default [
  {
    url: '/api/user/info',
    method: 'get',
    response: () => {
      return {
        code: 200,
        message: 'success',
        data: {
          id: 1,
          name: Mock.Random.cname(),
          avatar: Mock.Random.image('100x100', '#4A7BF7', 'Avatar'),
          role: 'admin'
        }
      }
    }
  },
  {
    url: '/api/user/list',
    method: 'get',
    response: ({ query }) => {
      const page = Number(query.page) || 1
      const pageSize = Number(query.pageSize) || 10
      const list = Mock.mock({
        [`data|${pageSize}`]: [{
          'id|+1': (page - 1) * pageSize + 1,
          'name': '@cname',
          'email': '@email',
          'createTime': '@datetime'
        }]
      }).data
      return {
        code: 200,
        message: 'success',
        data: {
          list,
          total: 100,
          page,
          pageSize
        }
      }
    }
  }
] as MockMethod[]

vite-plugin-mock还支持在生产构建时控制Mock是否启用。通过配置prodEnabled和injectCode等参数，可以将Mock接口打包到生产环境用于演示，或者在构建时动态注入开关。此外，该插件支持基于mockPath的目录结构自动加载所有文件，无需手动引入每个Mock文件，维护成本更低。

相较于直接使用Mock.js，vite-plugin-mock的优势在于：不修改全局XHR对象，避免了潜在的兼容性问题；开发服务器可以热更新Mock文件，修改后浏览器自动刷新，提升开发体验；原生支持TypeScript，类型提示友好；能够与Vite的环境变量和构建流程深度结合。不过它也有一些限制：只能在Vite项目中使用，如果你使用Webpack或其他构建工具，则无法直接使用该插件（虽然有对应的webpack插件，但并非同一套代码）；另外，插件的拦截机制基于开发服务器，如果前端代码运行在非开发服务器环境下（如静态文件服务器），Mock功能将失效。

两种方案的对比与选择

Mock.js和vite-plugin-mock并不是互斥的关系，实际上vite-plugin-mock内部也依赖Mock.js来生成随机数据。它们的核心区别在于拦截请求的方式和与构建工具的集成程度。Mock.js是一个通用的库，可以在任何JavaScript环境中使用，包括浏览器、Node.js、小程序等；而vite-plugin-mock则是一个针对Vite开发服务器的插件，只适用于Vite项目。

从配置复杂度来看，Mock.js需要手动创建Mock文件并在入口中引入，同时要注意生产环境移除；vite-plugin-mock通过插件配置即可自动加载mock目录，并且可以通过enable开关控制是否启用，生产环境无需额外处理。从功能丰富度来看，Mock.js提供了强大的数据模板和随机数据生成能力，而vite-plugin-mock在此基础上增加了热更新、TypeScript支持、请求日志等开发体验优化。从维护成本来看，vite-plugin-mock的文件组织更清晰，尤其当Mock接口数量较多时，目录化管理更加高效。

以下表格总结了两种方案的关键差异，帮助快速做出选择：

选择建议：如果你的项目使用Vue 3 + Vite搭建，推荐直接使用vite-plugin-mock，它能显著提升Mock开发体验；如果项目基于Webpack或其他构建工具，或者需要在小程序、Node.js脚本等非Vite环境中使用Mock数据，那么Mock.js是更灵活的选择。另外，对于已有大量Mock.js配置需要迁移的项目，可以逐步过渡到vite-plugin-mock，两者也可以在某些场景下共存（例如通过环境变量动态切换）。

总之，Mock数据方案的选择取决于项目技术栈和具体需求。Vue 3 + Vite的组合已经成为主流，vite-plugin-mock无疑是一个现代化的Mock解决方案，它简化了配置流程，让前端开发者能够更专注于业务逻辑的实现。而Mock.js作为基础库，其强大的数据生成能力依然是不可或缺的底层支撑。

Vue3Mock.jsvite-plugin-mock修改时间：2026-08-26 15:35:31