DT走过的路

https://github.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md

使用

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

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { resolve } from "path";
import { viteMockServe } from "vite-plugin-mock";

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    viteMockServe({
      mockPath: "./mock",
      enable: true,
    })
  ],
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
});

./mock/index.ts

import { MockMethod } from "vite-plugin-mock"
import Mock from 'mockjs'
import util from './util'
export default [
  {
    url: '/api/sales/list',
    method: 'get',
    response: () => { 
      const json = util.getJsonFile('./data/salesInfo.json');
      return Mock.mock(json);
    }
  },
  {
    url: '/api/trends/list',
    method: 'get',
    response: () => { 
      const json = util.getJsonFile('./data/trendsInfo.json');
      return Mock.mock(json);
    }
  }
] as MockMethod[]

./mock/util.ts

import fs from 'fs';
import path from 'path';
export default {
  getJsonFile: function (filePath: string) { 
    const json = fs.readFileSync(
      path.resolve(__dirname, filePath),
      'utf-8'
    );
    // 解析并返回
    return JSON.parse(json);
  }
}

./mock/data/salesInfo.json

{
  "code":200,
  "data|5":[
    {
      "_id": "@guid",
      "name": "商家@increment(1)",
      "value": "@integer(30, 200)"
    }
  ],
  "msg": "成功"
}

vite-plugin-mock和MockJS比较

MockJS 只负责「生成随机假数据」，不能做接口服务；vite-plugin-mock 是 Vite 中间件，在 Node 服务层拦截 HTTP 请求，把 MockJS 当成数据生成引擎。 只用 MockJS 有天生硬伤，插件解决所有痛点，二者是搭配关系不是替代关系。

一、底层原理完全不同

1. 原生 MockJS：浏览器端劫持 XHR

在浏览器运行时重写全局 XMLHttpRequest，在前端 JS 内存里拦截请求，不走真实 HTTP、不走网络栈：

1. 只能拦截 axios(XHR)，拦截不了 fetch，fetch 请求直接真实发往后端，mock 失效
2. Network 面板看不到任何 mock 接口请求，没法看入参、响应、状态码，调试只能打 log
3. 同步生成大数据，阻塞浏览器主线程，列表上万条数据页面卡死

2. vite-plugin-mock：Vite 启动的 Node 后端中间件

在 **Vite 开发服务器 (Node 层)** 拦截接口，属于标准 HTTP 服务：

• 浏览器正常发真实 http 请求（/api/xxx），Network 完整可见请求记录、header、params、statusCode
• fetch/axios/ 原生 XMLHttpRequest 全兼容，不受请求方式限制
• mock 文件改完Vite 热更新自动生效，不用刷新页面、不用重启项目

vite-plugin-mock优势

1. 可拿到完整请求信息（header、token、body、params），MockJS 做不到

MockJS 拦截拿不到请求头，没法模拟登录鉴权（token 校验）、根据传参动态返回数据；

2. 生产环境自动剔除 mock 代码

• 原生 MockJS 需要手动import('./mock')，极易意外打包进生产环境，上线继续返回假数据、线上 bug
• vite-plugin-mock 在 vite 配置开关：prodEnabled:false，打包时插件直接不加载 mock 目录，mock 代码完全不打进 dist，零上线风险

3. 模拟真实后端特性：延时、500 报错、跨域

response: (req, res) => {
  // 模拟接口延迟300ms
  setTimeout(()=>{
    // 模拟服务器异常
    res.status(500).json({msg:'服务器错误'})
  },300)
}

原生 MockJS 很难精准模拟延时、异常状态码。

4. 目录规范化，集中管理接口

项目/mock文件夹按模块拆分文件（user.js/order.js），插件自动扫描全部 mock 路由；

原生 MockJS 零散写在 main 里，项目接口多了难以维护。

5. 支持 TS、Vite 原生 ESM 适配

MockJS 老旧 CommonJS，Vite ESM 环境容易加载顺序错乱、mock 提前 / 延后初始化失效；插件原生适配 Vite+TS。

6. 支持 RESTful：区分 GET/POST/PUT/DELETE

MockJS 对不同请求方法区分繁琐，插件原生配置 method 匹配请求方式。