当前位置：首页 > news >正文

vue3+vite mock引入使用

news 2026/7/21 12:29:34

1、安装对应的包

npm install vite-plugin-mock mockjs-D

2、配置 Vite vite.config.js

import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{viteMockServe}from'vite-plugin-mock'exportdefaultdefineConfig({plugins:[vue(),viteMockServe({// 只在开发环境启用// enable: process.env.NODE_ENV === 'development',ignore:/^_/,// 忽略的文件mockPath:'./mock/',// mock 文件目录// 是否在控制台显示请求日志logger:true,// 日志配置// 支持 TypeScript// 如果使用 js，设为 falsesupportTs:false,// TypeScript 支持injectCode:`import { setupProdMockServer } from '../mock/_createProductionServer.js'; setupProdMockServer();`// 用来做自动导入})]})

3、创建 Mock 文件

// mock/demo/index.jsexportdefault[// 用户接口{url:'/vue-element-admin/login',method:'post',timeout:1000,response:()=>{return{status_code:200,status:'success',data:{token:'mock-token-123456',userInfo:{id:1,username:'admin',nickname:'管理员'}}}}}]

4、接入文件自动导入

// mock/_createProductionServer.jsimport{createProdMockServer}from'vite-plugin-mock/es/createProdMockServer'constmodules=import.meta.glob('./**/*.js',{eager:true})constmockModules=[]Object.keys(modules).forEach((key)=>{if(key.includes('/_')){return}mockModules.push(...modules[key].default)})/** * Used in a production environment. Need to manually import all modules */exportfunctionsetupProdMockServer(){createProdMockServer(mockModules)}