在vite项目中使用mock数据-vite-plugin-mock

vite-plugin-mock

提供本地和生产模拟服务。

vite 的数据模拟插件，是基于 vite.js 开发的。 并同时支持本地环境和生产环境。 Connect 服务中间件在本地使用，mockjs 在生产环境中使用。

安装 (yarn or npm)

node version: >=12.0.0
vite version: >=2.0.0

yarn add mockjs
#or
npm i mockjs -S

and

yarn add vite-plugin-mock -D
#or
npm i vite-plugin-mock -D

使用

开发环境是使用 Connect 中间件实现的。
与生产环境不同，您可以在 Google Chrome 控制台中查看网络请求记录

• vite.config.ts 配置

import { UserConfigExport, ConfigEnv } from 'vite';

import { viteMockServe } from 'vite-plugin-mock';
import vue from '@vitejs/plugin-vue';

export default ({ command }: ConfigEnv): UserConfigExport => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        // default
        mockPath: 'mock',
        localEnabled: command === 'serve',
      }),
    ],
  };
};

• viteMockServe 配置

{
mockPath?: string;
supportTs?: boolean;
ignore?: RegExp | ((fileName: string) => boolean);
watchFiles?: boolean;
localEnabled?: boolean;
ignoreFiles?: string[];
configPath?: string;
prodEnabled?: boolean;
injectFile?: string;
injectCode?: string;
logger?:boolean;
}

mockPath

type: string
default: mock

设置模拟.ts 文件的存储文件夹
如果watchFiles：true，将监视文件夹中的文件更改。 并实时同步到请求结果
如果 configPath 具有值，则无效

supportTs

type: boolean
default: true

打开后，可以读取 ts 文件模块。 请注意，打开后将无法监视.js 文件。

ignore

type: RegExp | ((fileName: string) => boolean);
default: undefined

自动读取模拟.ts 文件时，请忽略指定格式的文件

watchFiles

type: boolean
default: true

设置是否监视mockPath对应的文件夹内文件中的更改

localEnabled

type: boolean
default: command === ‘serve’

设置是否启用本地 xxx.ts 文件，不要在生产环境中打开它.设置为 false 将禁用 mock 功能

prodEnabled

type: boolean
default: command !== ‘serve’

设置打包是否启用 mock 功能

injectCode

type: string
default: ‘’

如果生产环境开启了 mock 功能,即prodEnabled=true.则该代码会被注入到injectFile对应的文件的底部。默认为main.{ts,js}

这样做的好处是,可以动态控制生产环境是否开启 mock 且在没有开启的时候 mock.js 不会被打包。

如果代码直接写在main.ts内，则不管有没有开启,最终的打包都会包含mock.js

injectFile

type: string
default: path.resolve(process.cwd(), ‘src/main.{ts,js}’)

injectCode代码注入的文件,默认为项目根目录下src/main.{ts,js}

configPath

type: string
default: vite.mock.config.ts

设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时，将首先读取并使用该文件。 配置文件返回一个数组

logger

type: boolean
default: true

是否在控制台显示请求日志

Mock file example

/path/mock

// test.ts

import { MockMethod } from 'vite-plugin-mock';
export default [
  {
    url: '/api/get',
    method: 'get',
    response: ({ query }) => {
      return {
        code: 0,
        data: {
          name: 'vben',
        },
      };
    },
  },
  {
    url: '/api/post',
    method: 'post',
    timeout: 2000,
    response: {
      code: 0,
      data: {
        name: 'vben',
      },
    },
  },
  {
    url: '/api/text',
    method: 'post',
    rawResponse: async (req, res) => {
      let reqbody = '';
      await new Promise((resolve) => {
        req.on('data', (chunk) => {
          reqbody += chunk;
        });
        req.on('end', () => resolve(undefined));
      });
      res.setHeader('Content-Type', 'text/plain');
      res.statusCode = 200;
      res.end(`hello, ${reqbody}`);
    },
  },
] as MockMethod[];

MockMethod

{
// 请求地址
url: string;
// 请求方式
method?: MethodType;
// 设置超时时间
timeout?: number;
// 状态吗
statusCode?:number;
// 响应数据（JSON）
response?: ((opt: { [key: string]: string; body: Record<string,any>; query: Record<string,any>, headers: Record<string, any>; }) => any) | any;
// 响应（非JSON）
rawResponse?: (req: IncomingMessage, res: ServerResponse) => void;
}

在生产环境中的使用

创建mockProdServer.ts 文件

//  mockProdServer.ts
import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer';

// 逐一导入您的mock.ts文件
// 如果使用vite.mock.config.ts，只需直接导入文件
// 可以使用 import.meta.glob功能来进行全部导入
import testModule from '../mock/test';

export function setupProdMockServer() {
  createProdMockServer([...testModule]);
}

配置 vite-plugin-mock

import { viteMockServe } from 'vite-plugin-mock';

import { UserConfigExport, ConfigEnv } from 'vite';

export default ({ command }: ConfigEnv): UserConfigExport => {
  // 根据项目配置。可以配置在.env文件
  let prodMock = true;
  return {
    plugins: [
      viteMockServe({
        mockPath: 'mock',
        localEnabled: command === 'serve',
        prodEnabled: command !== 'serve' && prodMock,
        //  这样可以控制关闭mock的时候不让mock打包到最终代码内
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,
      }),
    ],
  };
};