企业官网建设流程全解析

vite-plugin-mock完全指南：基于Mock.js的Vite数据模拟神器

【免费下载链接】vite-plugin-mockA mock plugin for vite.use mockjs.项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-mock

vite-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.0
• vite版本：>=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.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', }, }, }, ] as MockMethod[]

MockMethod类型详解

MockMethod是mock接口的配置类型，包含以下属性：

{ // 请求URL url: string; // 请求方法 method?: MethodType; // 请求延迟时间（毫秒） timeout?: number; // 状态码，默认200 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; }

示例：创建用户相关接口

下面是一个创建用户接口的示例（来自packages/playground/js-example/mock/user.js）：

export 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