Vue Mock 数据模拟指南

在 Vue 项目开发过程中，常常需要在没有真实后端接口的情况下进行前端联调。此时，Mock 数据就成为不可或缺的工具。通过模拟 API 返回，开发者可以独立完成页面逻辑、交互和 UI 的开发。

什么是 Vue Mock？

Vue Mock 并非 Vue 78TP功能，而是指在 Vue 项目中集成如 Mock.js、vite-plugin-mock（Vite 环境）或 webpack-dev-server proxy + mock 等技术，实现对 HTTP 请求的拦截与模拟响应。

快速开始（基于 Vite + Vue 3）

以 Vite 项目为例，安装并配置 mock 插件：

npm install mockjs -D
npm install vite-plugin-mock -D

在 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',
      enable: true,
    })
  ]
})

创建 mock/user.js 文件：

export default [
  {
    url: '/api/user/info',
    method: 'get',
    response: () => ({
      code: 200,
      data: {
        name: '张三',
        email: 'zhangsan@example.com'
      }
    })
  }
]

现在，在组件中请求 /api/user/info 即可获得模拟数据！

优势与适用场景

• 无需等待后端接口，提升开发效率
• 支持复杂数据结构和延迟响应，贴近真实环境
• 便于单元测试与 UI 调试
• 团队协作时统一接口规范