vite-plugin-mock完全指南基于Mock.js的Vite数据模拟神器【免费下载链接】vite-plugin-mockA mock plugin for vite.use mockjs.项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-mockvite-plugin-mock是一款基于Mock.js开发的Vite数据模拟插件同时支持本地开发环境和生产环境。在本地开发时使用Connect服务中间件在生产环境中则使用Mock.js为前端开发者提供了便捷高效的数据模拟解决方案。为什么选择vite-plugin-mock在前端开发过程中经常会遇到后端接口尚未开发完成的情况。这时数据模拟就显得尤为重要。vite-plugin-mock作为一款专为Vite打造的插件具有以下优势同时支持开发和生产环境本地开发使用Connect中间件可在Chrome控制台查看网络请求记录生产环境使用Mock.js满足测试需求。简单易用只需简单配置即可快速搭建模拟服务。实时更新支持监听mock文件变化实时更新模拟数据。灵活强大基于Mock.js可生成各种类型的模拟数据支持自定义响应逻辑。快速开始安装与基本配置环境要求node版本12.0.0vite版本2.0.0安装依赖首先需要安装mockjs和vite-plugin-mock# 安装mockjs yarn add mockjs # 或者 npm i mockjs -S # 或者 pnpm add mockjs # 安装vite-plugin-mock yarn add vite-plugin-mock -D # 或者 npm i vite-plugin-mock -D # 或者 pnpm add vite-plugin-mock -D基本配置在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({ // 默认mock文件存放目录 mockPath: mock, // 是否启用mock功能 enable: true, }), ], } }深入了解核心配置选项vite-plugin-mock提供了丰富的配置选项让你可以根据项目需求进行灵活调整mockPath类型string默认值mock说明设置mock .ts文件存放的文件夹路径。如果watchFiles: true将监听该文件夹下的文件变化并实时同步到请求结果。ignore类型RegExp | ((fileName: string) boolean)默认值undefined说明自动读取模拟.ts文件时忽略指定格式的文件。watchFiles类型boolean默认值true说明设置是否监听mock .ts文件的变化。enable类型boolean默认值true说明是否启用mock功能。configPath类型string默认值vite.mock.config.ts说明设置mock读取的数据入口。当该文件存在且位于项目根目录时将优先读取并使用该文件。配置文件返回一个数组。logger类型boolean默认值true说明是否在控制台显示请求日志。实战指南创建Mock文件Mock文件基本结构在mockPath指定的文件夹下创建.ts文件例如test.tsimport { 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, }, }, }, ] as MockMethod[]MockMethod类型详解MockMethod是mock接口的配置类型包含以下属性{ // 请求URL url: string; // 请求方法 method?: MethodType; // 请求延迟时间毫秒 timeout?: number; // 状态码默认200 statusCode?: number; // 响应数据JSON response?: ((opt: { [key: string]: string; body: Recordstring,any; query: Recordstring,any, headers: Recordstring, any; }) any) | any; // 响应非JSON rawResponse?: (req: IncomingMessage, res: ServerResponse) void; }示例创建用户相关接口下面是一个创建用户接口的示例来自packages/playground/js-example/mock/user.jsexport default [ { url: /api/createUser, method: post, response: ({ body }) { console.log(body, body) return { code: 0, message: ok, data: null, } }, }, ]高级用法使用rawResponse如果需要返回非JSON格式的响应可以使用rawResponse{ 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}) }, }生产环境配置在生产环境中使用mock需要创建mockProdServer.ts文件// mockProdServer.ts import { createProdMockServer } from vite-plugin-mock/client // 逐一导入你的mock .ts文件 // 如果你使用vite.mock.config.ts只需直接导入该文件 import testModule from ../mock/test export function setupProdMockServer() { createProdMockServer([...testModule]) }然后在入口文件中引入// src/main.ts if (process.env.NODE_ENV production) { import(./mockProdServer).then(({ setupProdMockServer }) { setupProdMockServer() }) }注意事项mock .ts文件中不能使用node模块否则生产环境会失败。在生产环境中使用mock仅适用于某些测试环境不要在正式环境中开启以免造成不必要的错误。同时在生产环境中可能会影响正常的Ajax请求如文件上传失败等。示例项目vben Admin是一个使用vite-plugin-mock的示例项目你可以参考它的实现方式。总结vite-plugin-mock是一款功能强大、使用简单的Vite数据模拟插件它基于Mock.js为前端开发者提供了便捷的接口模拟方案。无论是在开发环境还是测试环境都能帮助你快速搭建模拟服务提高开发效率。希望本指南能帮助你更好地了解和使用vite-plugin-mock。如果你有任何问题或建议欢迎在项目的GitHub仓库提交issue。【免费下载链接】vite-plugin-mockA mock plugin for vite.use mockjs.项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-mock创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考