vite 配置 mock 数据

    1. 安装依赖
	npm install mock vite-plugin-mock
    1. 使用依赖
	vite.config.js 引入 
	import { viteMockServe } from 'vite-plugin-mock'
	plugins 中配置
	viteMockServe({ 
	 	 mockPath: 'mock', // 设置模拟数据的存储文件夹,
         logger: true, // 是否在控制台显示请求日志
         enable: command === 'serve'
    })
    1. 创建数据
   - 在 src 外创建mock文件夹
   - 在index.js 中创建数据
   
   import Mock from 'mockjs'
   const dataList = []
   for (let i = 0; i < 33; i++) {
     dataList.push({
       id: Mock.mock('@guid'),
       name: Mock.mock('@cname'),
     })
   }
    // 导出接口
   export default [
   	  {
   	    url: '/login', // 接口
   	    method: 'get', // 请求类型
   	    response: (res) => {
   	      return {
   	        code: 0,
   	        msg: '成功',
   	        data: dataList
   	      }
   	    }
   	  }
   	]
   

<think>我们正在配置vite-mock,即使用vite-plugin-mock插件来模拟数据。根据引用内容,配置步骤如下:1.**安装依赖**:需要安装`mockjs`和`vite-plugin-mock`。-使用npm:`npminstall mockjs vite-plugin-mock`-使用yarn:`yarnadd mockjs vite-plugin-mock`-使用pnpm:`pnpmi mockjs vite-plugin-mock -D`(引用[4])2.**创建mock文件夹和文件**:在项目根目录或src目录下创建mock文件夹,并在其中创建模拟接口的ts文件(或js文件)。例如,在`src/mock`目录下创建`test.ts`(引用[3])或`demo`文件夹(引用[3])。示例文件内容(引用[3]):```typescript//src/mock/getInfo.tsimport {MockMethod} from"vite-plugin-mock";export default[{url:"/api/getUserInfo",//接口路径,必须为字符串method:"get",//请求方法response:() =>{//响应函数return {code:0,data: {name: "JohnDoe",age:18}};}}]as MockMethod[];```3.**配置vite.config.ts**:在vite配置文件中引入`viteMockServe`插件,并配置参数。示例配置(引用[2][3][5]):```typescript//vite.config.tsimport{ defineConfig }from "vite";import vuefrom "@vitejs/plugin-vue";import{ viteMockServe} from"vite-plugin-mock";export defaultdefineConfig({plugins:[vue(),viteMockServe({mockPath: "./src/mock",//设置模拟数据的存储文件夹(相对于项目根目录或绝对路径)enable: true,//是否启用mock功能supportTs: true,//是否支持ts文件(引用[2]中为false,根据项目需要)logger: true,//是否在控制台显示请求日志(引用[2]中为false)//其他配置...})]});```**注意**:`mockPath`的路径设置。引用[2]提到,如果配置为`"/mock/"`,则指的是项目根目录下的mock文件夹(不是src目录下)。而引用[3]中配置为`"./src/mock"`,指的是src下的mock文件夹。请根据实际项目结构设置。 4. **使用接口**:在代码中,通过HTTP请求(如axios)访问配置的接口地址(如`/api/getUserInfo`),即可得到模拟数据。 **注意事项**: -如果使用TypeScript,确保在tsconfig.json中配置了必要的类型(引用[3]中没有特别说明,但通常需要安装类型定义)。-开发环境下,插件会自动启动mock服务。生产环境默认不会启用,但建议在生产环境关闭mock(通过`enable:process.env.NODE_ENV=== 'development'`来控制)。 根据以上步骤,即可在项目中配置vite-mock。 §§相关问题§§1.如何为不同的接口配置不同的请求方法(GET、POST等)?2.在vite-plugin-mock中如何模拟延迟响应? 3.如何动态生成模拟数据(使用mockjs)? 4.如何在生产环境中禁用mock?</think>### 配置 vite-mockVite 项目中的步骤 #### 1. **安装依赖** ```bash # 使用 npm npm install mockjs vite-plugin-mock -D # 使用 yarn yarn add mockjs vite-plugin-mock -D # 使用 pnpm pnpm i mockjs vite-plugin-mock -D ``` #### 2. **创建 mock 文件** 在项目根目录下创建 `mock` 文件夹(或 `src/mock`),并添加接口文件,例如 `src/mock/user.ts`: ```typescript import { MockMethod } from "vite-plugin-mock"; export default [ { url: "/api/login", // 接口地址 method: "post", // 请求方法 response: () => ({ // 模拟响应 code: 200, data: { token: "mock-token" } }) }, { url: "/api/user", method: "get", response: () => ({ code: 200, data: { name: "John", age: 30 } }) } ] as MockMethod[]; ``` #### 3. **配置 vite.config.ts** ```typescript import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import { viteMockServe } from "vite-plugin-mock"; export default defineConfig({ plugins: [ vue(), viteMockServe({ mockPath: "./src/mock", // mock 文件路径 enable: true, // 开启 mock supportTs: true, // 支持 TypeScript logger: true, // 控制台输出请求日志 }) ] }); ``` > **关键配置说明**: > - `mockPath`: 指向存放 mock 文件的目录(相对项目根目录) > - `enable: true`: 仅在开发环境启用,生产环境自动禁用[^3] > - `supportTs`: 设为 `true` 可支持 TypeScript 编写的 mock 文件 #### 4. **使用 mock 接口** 在代码中直接请求配置的接口地址: ```javascript // 示例:使用 axios axios.post("/api/login").then(res => { console.log(res.data.token); // 输出 "mock-token" }); ``` ### 常见问题解决 1. **接口 404 错误**: - 检查 `mockPath` 是否指向正确的文件夹路径(注意:是项目根目录下的路径,非 `src` 目录)[^2] - 确保接口地址与 mock 文件中的 `url` 完全匹配(包括大小写) 2. **TypeScript 类型报错**: 安装类型声明: ```bash npm install @types/mockjs -D ``` 3. **生产环境禁用**: 插件默认在生产构建(`vite build`)时自动禁用 mock[^3] --- ### 配置示例说明 | 配置项 | 说明 | 示例值 | |--------------|----------------------------------------------------------------------|---------------------| | `mockPath` | mock 文件目录(相对于项目根目录) | `"./src/mock"` | | `enable` | 是否启用 mock(建议开发环境设为 `true`) | `true` / `false` | | `supportTs` | 是否支持 TypeScript 格式的 mock 文件 | `true` | | `logger` | 是否在控制台输出请求日志(方便调试) | `true` | | `watchFiles` | 是否监听 mock 文件变化(热更新) | `true`(默认) | > 完整配置参考:[vite-plugin-mock 文档](https://github.com/vbenjs/vite-plugin-mock) ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值