1.说明
vite-plugin-mock的npm首页
根据我自己的实验:
localEnabled
控制mock开发环境是否启动。
- 如果生产环境想要使用
mock
,只有prodEnabled
为true,injectCode
注入指定代码时才会生效。
但是官网不是这么解释的,所以我也不太确定。
2.安装
yarn add mockjs vite-plugin-mock --dev
3.编写Mock用例
这里直接将根目录下的mock
目录拷贝出来就行。
mock\_util.ts
:里面封装的是数据请求结构类型。
mock\_createProductionServer.ts
:用于配置生产环境动态Mock的js文件,文档中有说。
其他的
:都是Mock用例。每一个js
、ts
。都要默认导出一个MockMethod
类型的数组。每一项MockMethod
就是拦截的一个方法。MockMethod
的response
对应方法的return
将会被Mock
实例处理。也就是说,你可以在return
的对象中使用Mock规则
不过_createProductionServer.ts
中使用了Glob 导入。
4.配置Mock
build\vite\plugin\mock.ts
:
/**
* Mock plugin for development and production.
* https://github.com/anncwb/vite-plugin-mock
*/
import { viteMockServe } from 'vite-plugin-mock';
export function configMockPlugin(isBuild: boolean) {
return viteMockServe({
// ↓忽略以_开头的文件
ignore: /^\_/,
// ↓解析根目录下的mock文件夹
mockPath: 'mock',
localEnabled: !isBuild,
prodEnabled: isBuild,
injectCode: `
import { setupProdMockServer } from '../mock/_createProductionServer';
setupProdMockServer();
`,
});
}
5.配置进Vite
build\vite\plugin\index.ts
:
// ...
import { configMockPlugin } from './mock';
export function createVitePlugins(viteEnv: ViteEnv, isBuild: boolean, pkg: any) {
// ...
// vite-plugin-mock
VITE_USE_MOCK && vitePlugins.push(configMockPlugin(isBuild));
return vitePlugins;
}
上一章
第五十二章-Vite插件-vite-plugin-windicss
下一章
第五十四章-Vite插件-vite-plugin-purge-icons