Vue3 Mock 数据实战：使用 Mockjs 与 vite-plugin-mock 构建前端独立开发环境
作者：袖梨
2026-05-27
前端开发过程中，常常面临因后端接口未完成而被迫停滞的困境。本文将介绍如何通过Mock技术实现独立开发，彻底摆脱对后端进度的依赖。
前言：告别被动等待的开发模式
在项目开发过程中，前端工程师经常遇到页面样式、布局适配和交互逻辑都已调试完成，却因后端接口尚未准备就绪而被迫停工的情况。
这种状况不仅会导致项目进度受阻，更令人困扰的是当后端临时修改字段、延期交付或调整接口逻辑时，前端不得不反复修改代码，严重影响开发效率。
要解决前后端开发强耦合的问题，关键在于建立前端本地Mock开发环境。
本教程将详细介绍如何实现Vue3+Vite+Mockjs+vite-plugin-mock+Element Plus的全套解决方案。该方案操作简单、即装即用、支持动态数据生成、适用于各种业务场景，并能在生产环境中自动失效，帮助开发者彻底解决前后端联调等待的问题。
一、Mock 方案选型：为什么首选 vite-plugin-mock？
虽然市面上存在多种Mock解决方案，但能完美适配Vite+Vue3技术栈的优质方案并不多。下面将对主流方案进行全面对比分析。
1.1 主流 Mock 方案优劣对比
硬编码假数据：灵活性差，数据固定无法动态调整，不支持分页、空数据等场景测试，后期需要大量修改代码。
在线Mock平台：需要网络连接，断网时无法使用，团队协作时同步困难，接口更新存在延迟，不适合私有化项目。
浏览器请求拦截：兼容性较差，不支持服务端渲染，难以模拟网络延迟和接口错误等复杂场景。
vite-plugin-mock+Mockjs：与Vite深度集成，支持离线使用，可生成动态随机数据，能模拟网络延迟和异常情况，修改后实时生效，生产环境可自动关闭。
1.2 这套组合方案核心优势
该方案的核心价值在于让前端掌握接口开发的主动权，实现前后端并行开发。
可在本地离线运行，不依赖后端开发进度
通过Mockjs生成动态随机数据，模拟真实接口返回格式
支持模拟网络延迟、接口错误、空数据等多种场景
作为Vite插件原生集成，修改后无需重启项目
生产环境自动关闭，不会影响线上数据
二、快速集成：Vite + Vue3 搭建 Mock 环境
以下配置适用于所有Vite+Vue3项目，可直接复制使用。
2.1 安装稳定版依赖
为避免兼容性问题，建议安装以下指定版本：
# 安装 Vue3 + Element Plus + Mock 相关依赖
npm install vue axios element-plus -S
npm install vite @vitejs/plugin-vue mockjs [email protected] -D
2.2 Vite 核心配置
修改vite.config.js文件，配置Mock插件：
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd())
return {
plugins: [
vue(),
viteMockServe({
enable: env.VITE_USE_MOCK === 'true',
dir: './mock',
watch: true,
prodEnable: false
})
],
server: {
proxy: {
'/api': {
target: '',
changeOrigin: true
}
}
}
}
})
2.3 main.js 引入 Element Plus
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './style.css'
import App from './App.vue'createApp(App).use(ElementPlus).mount('#app')
2.4 初始化项目目录结构
在项目根目录创建mock文件夹，按业务模块管理接口：
project
├── .env.development
├── .env.production
├── vite.config.js
├── index.html
├── package.json
├── mock
│ ├── utils.js
│ └── user.js
└── src
├── main.js
├── App.vue
├── style.css
└── MockDemo.vue
三、Mockjs 核心实战：生成真实动态数据
Mock的核心价值在于模拟真实、动态、不规则的业务数据。
3.1 Mockjs 高频语法速查
