vite-plugin-mock插件的3.0.2版本在生产环境无法使用

前台端水工程师2025-10-12 11:02

vite-plugin-mock

在开发中使用vite-plugin-mock插件时遇到生产环境中无法使用的问题，查看了github中提交的issues

发现原来不止我一个人遇到这种情况

后面我将3.0.2版本降级到2.9.6后才可以正常使用

安装

npm install mockjs@1.1.0 --save

npm install vite-plugin-mock@2.9.6 --save-dev

使用：

vite.config.ts

ts 复制代码

export default defineConfig(
  ({ command }) => {
    return {
      // ...其它配置,略
      plugins: [
        viteMockServe({
          ignore: /^\_/,//忽略以_开头的文件
          mockPath: 'mock',// mock文件的存放路径
          localEnabled: true,//是否启用本地模拟数据
          prodEnabled: true,//是否启用生产环境模拟数据
          injectCode: `
          import { setupProdMockServer } from '../mock/_createProductionServer'

          setupProdMockServer()
          `
        })
      ]
    }
  }
)

根目录中创建mock文件夹，设置mock接口

mock目录下创建_createProductionServer.ts文件

_createProductionServer.ts

ts 复制代码

import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'

import login from './login'

let mockModules: any[] = [...login]

export function setupProdMockServer() {
  createProdMockServer(mockModules)
}

登录接口示例

mock/login/index.ts

ts 复制代码

export default [
  {
    // 请求地址
    url: '/mock/api/login',
    // 请求方式
    method: 'post',
    // 模拟接口返回数据
    response: ({ body }) => {
      if (body.username !== 'admin' || body.password !== 'admin') {
        return { code: 400, message: '用户名或密码错误' }
      }
      return {
        access_token: 'token',
        token_type: 'Bearer',
      }
    }
  }
]