第五十三章-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用例。每一个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