vite-plugin-mock模拟接口返回数据

记录点滴，

493人浏览 · 2025-06-28 10:45:34

记录点滴， · 2025-06-28 10:45:34 发布

参考：
文档：
mockjs
vite-plugin-mock
vite-plugin-mock@2.9.6
博客：
https://blog.csdn.net/hsy0827/article/details/139704956
https://juejin.cn/post/7516398507575001129

安装：

npm i  mockjs -S
npm i vite-plugin-mock -D

配置：

最新版@3.0.2：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', // mock文件夹路径, 默认是根目录下面的mock文件夹，注意不能使用@这样的别名，否则会报错
        enable: command === 'serve',// 只有开发环境才开启mock
      }), 
    ]
  }
})

viteMockServe 配置

{
    mockPath?: string; ///默认：mock，设置模拟.ts 文件的存储文件夹，如果watchFiles：true，将监视文件夹中的文件更改， 并实时同步到请求结果。如果 configPath 具有值，则无效
    ignore?: RegExp | ((fileName: string) => boolean); ///默认：undefined, 自动读取模拟.ts 文件时，忽略指定格式的文件
    watchFiles?: boolean; ///默认：true, 设置是否监视mockPath对应的文件夹内文件中的更改
    enable?: boolean; ///默认：true, 是否启用 mock 功能
    ignoreFiles?: string[];
    configPath?: string; //默认：vite.mock.config.ts，设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组
    logger?:boolean; //默认：true, 是否在控制台显示请求日志
}

@2.9.6版本

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', // mock文件夹路径, 默认是根目录下面的mock文件夹，注意不能使用@这样的别名，否则会报错
        localEnabled: command === 'serve', // 只有开发环境才开启mock
        prodEnabled: false,
      }), 
    ]
  }
})

viteMockServe 配置

{
    mockPath?: string;
    supportTs?: boolean;
    ignore?: RegExp | ((fileName: string) => boolean);
    watchFiles?: boolean;
    localEnabled?: boolean;
    ignoreFiles?: string[];
    configPath?: string;
    prodEnabled?: boolean;
    injectFile?: string;
    injectCode?: string;
}

注意：mockPath 的路径中不能使用@这样的别名，否则会报错
在这里插入图片描述

使用：

mock文件夹的创建位置及文件名需要和前面vite.config.js里的mockPath配置的一致，mock底下的文件名没有特殊要求。
在这里插入图片描述

定义接口：

import mockjs from 'mockjs'

// mock 时登录的用户和密码
const username = ['admin', 'super']
const password = [
  '123456',
  '678945'
]

const userlist = mockjs.mock({
  'userList|10': [
    {
      userId: '@increment',
      username: '@first',
      password: '@string(6, 10)',
      // 随机生成头像
      avatar: '@image(100x100)',
      desc: '@sentence',
      roles: ['@first'],
      routes: ['@first'],
      // 随机生成id号
      id: '@id',
      // 随机生成中文姓名
      name: '@cname',
      // 属性 uid 是一个自增数，起始值为 1，每次增 1
      'uid|+1': 1,
      // 随机生成ip地址
      ip: '@ip',
      // 随机生成省市区地址
      address: '@county(true)',
      // 随机生成邮政编码
      zip: '@zip',
      token: '@guid',
      // 随机生成日期
      date: '@date("yyyy-MM-dd")',
      // 随机生成18-70之间的年龄
      'age|18-70': 20,
    },
  ],
})
export default [
  // 用户登录接口
  {
    url: '/api/user/login',
    method: 'post',
    response: ({ body }) => {
      // const { username, password } = body
      if (username.includes(body.username) && password.includes(body.password)) {
        return {
          code: 200,
          data: {
            token:
              'eyJhbGciOiJIUzI1NiJ9.eyJMT0dJTl9VU0VSX0tFWSI6IjdlNTI3MWVkLTVhM2ItNGFlZC05ODgwLWJjOTUxMmU0ZTEyYiJ9.iotqwneW0qlCng36VKh0J0Geo5TkVewlAo_NFSUcrmM',
          },
        }
      }
      return { code: 201, data: { message: '账号或密码不正确' } }
    },
  },
  {
    url: '/api/user/getUserList',
    method: 'get',
    response: ({ request, body }) => {
      console.log('请求拦截器', request, body)
      // const { username, password } = body
      return {
        code: 200,
        data: userlist,
      }
    },
  },
]

MockMethod 属性

{
  // 请求地址
  url: string;
  // 请求方式
  method?: MethodType;
  // 设置超时时间
  timeout?: number;
  // 状态吗
  statusCode?:number;
  // 响应数据（JSON）
  response?: ((opt: { [key: string]: string; body: Record<string,any>; query:  Record<string,any>, headers: Record<string, any>; }) => any) | any;
  // 响应（非JSON）
  rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
}

在页面中调用：

<script setup>
import { ref } from 'vue'
import axios from 'axios';

axios.post('/api/user/login',{username:'admin',password:'123456'}).then((res) => {
  console.log(res);
})
</script>

正式环境使用：

最新版@3.0.2

创建mockProdServer.ts 文件

//  mockProdServer.js
import { createProdMockServer } from 'vite-plugin-mock/client'

// 逐一导入您的mock.js文件
// 如果使用vite.mock.config.js，只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import index from '../mock/index'
export function setupProdMockServer() {
  createProdMockServer([...index])
}

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

export default defineConfig(({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        mockPath: 'mock', // mock文件夹路径, 默认是根目录下面的mock文件夹，注意不能使用@这样的别名，否则会报错
        enable: command === 'serve',// 只有开发环境才开启mock
      }), 
    ]
  }
})

@2.9.6 版本：

在src中新建文件mockProdServer.js

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

// 逐一导入您的mock.js文件
// 如果使用vite.mock.config.js，只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import index from '../mock/index'
export function setupProdMockServer() {
  createProdMockServer([...index])
}

修改vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
   plugins: [
     vue(),
     viteMockServe({// 更多配置见最下方
     	mockPath: "./mock/", //mock文件地址 
     	localEnabled: true, // 开发打包开关 
     	prodEnabled: true, // 生产打包开关 // 这样可以控制关闭mock的时候不让mock打包到最终代码内 
     	injectCode: ` import { setupProdMockServer } from './mockProdServer'; setupProdMockServer(); `, // ./mockProdServer路径是相对于main.js的路径
     	logger: false, //是否在控制台显示请求日志 
     	supportTs: false, //打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件 
     	ignore: /^\_/, // 忽略下划线开头的文件
     })
   ]
 })