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