安装
npm i mockjs vite-plugin-mock -D
配置
如果你的vite.config.js中的plugins是个数组，那你有福了。
import { viteMockServe } from 'vite-plugin-mock'
import vue from '@vitejs/plugin-vue'
export default ({ command }: ConfigEnv): UserConfigExport => {
return {
plugins: [
vue(),
viteMockServe({
ignore: /^_/,
mockPath: "mock",
localEnabled: !isBuild,
prodEnabled: isBuild,
injectCode: `
import { setupProdMockServer } from '../../mock/_mockProdServer'; //后面会说这里是干嘛的
setupProdMockServer();
`,
}),
],
}
}
如果你的vite.config.js里的plugins不是数组，那么需要往vitePlugins里面进行push
vitePlugins.push(
viteMockServe({
ignore: /^_/,
mockPath: "mock",
localEnabled: !isBuild,
prodEnabled: isBuild,
injectCode: `
import { setupProdMockServer } from '../../mock/_mockProdServer';//后面会说这里是干嘛的
setupProdMockServer();
`,
})
);
使用
在根目录下新建mock文件夹用于存放mock数据，每个模块再新建文件夹
在mock的根目录里新建 _mockProdServer.js 文件(文件名随意)。内容如下：
import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
// 这里可以逐一导入您的mock文件
// 也可以使用 import.meta.glob功能来进行全部导入
const modules = import.meta.globEager("./**/*.js");
const mockModules = [];
Object.keys(modules).forEach((key) => {
if (key.includes("/_")) {
//这个if就与mock根目录下的文件有关，排除文件名中含有"_"的文件
return;
}
mockModules.push(...modules[key].default);
});
export function setupProdMockServer() {
createProdMockServer(mockModules);
}
//这里就是vite.config.js中plugins里的viteMockServe.injectCode内容
开发时的使用
eg.在mock下新建文件夹,新建js文件。内容如下
export default [
{
url: '/api/get',//这里的api相当于公共请求头，根据自己的需要修改
method: 'get',
response: ({ query }) => {
return {
code: 0,
data: {
name: 'vben',
},
}
},
},
]
调用
export function test(params) {
return request({
url: "/get",
method: "get",
params,
});
}
