Electron+Vue3+Vite项目实战：vite-plugin-mock-server实现前后端并行开发

最新推荐文章于 2026-03-08 00:10:13 发布

原创

最新推荐文章于 2026-03-08 00:10:13 发布 · 200 阅读

标签

#Electron #Vue3 #Vite #前后端并行开发 #ViewUI

1. 为什么我们需要一个模拟后端服务器？

做前端开发的朋友们，肯定都经历过这种“痛苦”：页面和交互逻辑都写好了，就等着后端把接口给出来，好把数据填进去跑通整个流程。结果左等右等，后端兄弟那边排期紧张，或者接口设计还在反复讨论，你的前端工作就卡在这里，没法往下推进。更难受的是，有时候你甚至不确定自己写的请求逻辑、数据解析、状态管理对不对，因为没地方可以调啊！

这就是典型的“前后端耦合”开发带来的阻塞。在传统的开发流程里，前端严重依赖后端的接口进度，一旦后端延迟，前端就只能干等着，或者写一堆死数据（Mock Data）硬编码在组件里，等接口来了再一点点替换掉，既低效又容易出错。

所以，一个理想的解决方案是：在开发阶段，让前端能“独立运行”。我们给自己搭建一个“假的”后端服务器，它能够根据我们预先定义好的接口规范，返回结构正确、内容随机的模拟数据。这样，前端的所有功能，从页面渲染到交互逻辑，再到数据流转，都可以在这个“仿真环境”里完整地开发和测试。等到后端真正的接口开发完毕，我们只需要简单地切换一下请求的“目标地址”，就能无缝对接，进行联调。

这种模式，就是我们常说的 “前后端并行开发”。它带来的好处是实实在在的：

提升开发效率：前端不再被后端进度阻塞，可以全力推进自己的工作。
降低沟通成本：前后端只需提前约定好接口的数据格式（JSON Schema），之后各自按约定实现即可，减少了过程中的反复确认。
提升代码质量：前端可以更早、更全面地进行自测，包括各种边界情况（比如空数据、超长数据、网络错误等），提前发现并修复问题。
改善开发体验：热更新（HMR）可以正常工作，修改了Mock数据或接口逻辑，页面能即时响应，调试起来非常顺畅。

在 Vue3 + Vite 的现代前端项目中，要实现这个目标，我们不再需要去启动一个笨重的 Node.js 服务器（比如用 Express 或 Koa 单独写一个服务）。Vite 的插件生态为我们提供了更轻量、更集成化的方案。今天我要详细分享的，就是如何在你基于 Electron + Vue3 + Vite 的技术栈中，集成 vite-plugin-mock-server 这个插件，快速搭建起属于你自己的、高性能的模拟后端服务。

2. 项目环境与插件初识

在开始动手之前，我们先明确一下技术栈和工具。我假设你已经有了一个正在开发中的 Electron + Vue3 + Vite 项目。如果没有，你可以使用 create-electron-vite 或类似的脚手架快速初始化一个。我们的目标是在这个已有的 Vite 前端工程里，嵌入一个 Mock 服务器。

为什么选择 vite-plugin-mock-server？我对比过几个流行的 Mock 方案，比如 vite-plugin-mock（基于 Mock.js）、mockjs 直接拦截 XHR/Fetch，或者自己写一个 Koa 中间件。vite-plugin-mock-server 的优势在于：

真服务器：它不是在浏览器层拦截请求（这有时会带来调试困扰），而是在 Vite Dev Server 内部启动了一个真实的 HTTP 服务器。这意味着你的网络请求会真实地发出去并收到响应，更贴近生产环境。
与 Vite 深度集成：作为 Vite 插件，它的配置和启动与你的开发服务器是一体的，无需管理多个进程。
基于文件系统：Mock 接口的定义以文件的形式组织，清晰、易于管理，并且支持 TypeScript，能获得很好的类型提示。
灵活的路由：支持 RESTful 风格的路由匹配，可以模拟 GET、POST、PUT、DELETE 等各种 HTTP 方法。
热重载：修改 Mock 文件后，服务器会自动重载，无需重启开发服务。

接下来，我们进入实战环节。我会带你一步步完成从安装、配置、编写 Mock 接口到最终在组件中调用的全过程，过程中我会分享我踩过的一些坑和最佳实践。

2.1 安装依赖

第一步非常简单，打开你的终端，进入项目根目录，执行安装命令。这里我们将其作为开发依赖安装，因为 Mock 服务仅在开发阶段使用。

npm install vite-plugin-mock-server -D
# 或者使用 yarn
yarn add vite-plugin-mock-server -D
# 或者使用 pnpm
pnpm add vite-plugin-mock-server -D

安装完成后，我们还需要一个生成随机数据的帮手。虽然插件本身不强制，但我强烈推荐搭配 Mock.js 使用，它能非常方便地生成符合中国常见数据模式（如中文名、手机号、地址等）的随机数据。

npm install mockjs -D
# 同时安装它的类型定义文件，如果你用TypeScript的话
npm install @types/mockjs -D

2.2 配置 Vite 插件

安装好依赖后，我们需要在 Vite 的配置文件（通常是 vite.config.ts）中引入并配置这个插件。这是最关键的一步，配置项决定了 Mock 服务器如何工作。

打开你的 vite.config.ts 文件，首先在文件顶部引入插件和 Node.js 的 path 模块（用于处理路径）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path' // 引入 path 模块
import mockServer from 'vite-plugin-mock-server' // 引入 Mock 服务器插件

export default defineConfig({
  plugins: [
    vue(),
    // 在这里配置 mock-server 插件
    mockServer({
      logLevel: 'info',
      urlPrefixes: ['/api/'], // 重点：匹配哪些前缀的 URL 会被 Mock 服务器处理
      mockRootDir: path.resolve(__dirname, 'src/api/mock'), // 重点：Mock 文件存放的根目录
      mockJsSuffix: '.mock.js', // JS Mock 文件后缀
      mockTsSuffix: '.mock.ts', // TS Mock 文件后缀
      noHandlerResponse404: true, // 对于未匹配到的请求，是否返回404
    })
  ],
  // ... 其他 Vite 配置
})

我来详细解释一下这几个核心配置项：

logLevel: 设置日志级别，'info' 会在控制台输出请求匹配信息，方便调试。你也可以设为 'silent' 来关闭日志。
urlPrefixes: 这是最重要的配置之一。它告诉插件，哪些 URL 开头的请求应该被 Mock 服务器接管。通常我们的前端请求都会有一个统一的前缀，比如 /api。这里配置了 ['/api/']，就意味着所有以 /api/ 开头的请求（例如 /api/auth/login, /api/user/profile）都会走我们的 Mock 逻辑，而不是发向真正的后端地址。
mockRootDir: 指定你的 Mock 数据文件放在哪个目录下。我习惯在 src/api/mock 目录下管理。path.resolve(__dirname, 'src/api/mock') 会生成一个绝对路径，确保插件能正确找到文件。
mockJsSuffix / mockTsSuffix: 定义 Mock 文件的后缀名。插件会扫描 mockRootDir 目录下所有以这些后缀结尾的文件，并将其中的路由配置加载进来。使用 .mock.ts 可以让我们的 Mock 文件也享受 TypeScript 的类型检查。
noHandlerResponse404: 如果设置为 true，当一个请求

最低0.47元/天解锁文章