第五十三章-Vite插件-vite-plugin-mock

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用例。每一个jsts。都要默认导出一个MockMethod类型的数组。每一项MockMethod就是拦截的一个方法。MockMethodresponse对应方法的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

# vben  vite 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×