在vite项目中使用mock数据-vite-plugin-mock_hucoo小白_vite 使用mock

大大的周 02-07 6662

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(); `, }), ], }; };