建设网站费怎么入账,设计logo图案免费,绍兴网站推广,电子商务公司门头照片vite 使用 vite-plugin-mock 和 mockjs 配置 mock 模式
当后端还没有完全弄好#xff0c;而前端需要同时启动的时候#xff0c;一般会使用 mock 模拟后端响应#xff0c;这样在后端接口准备完成之后#xff0c;前端能以较小的工作量和接入接口#xff0c;完成生产开发。 …vite 使用 vite-plugin-mock 和 mockjs 配置 mock 模式
当后端还没有完全弄好而前端需要同时启动的时候一般会使用 mock 模拟后端响应这样在后端接口准备完成之后前端能以较小的工作量和接入接口完成生产开发。
最近正好尝试了一下记录一下配置过程。
一、下载和安装
vite 可以使用 vite-plugin-mock 插件配合 mockjs 完成项目的 mock 配置。所以我们需要下载两个东西vite-plugin-mock 和 mockjs 注意 目前最新的 vite-plugin-mock 是 3.0.0如果直接下载会是最新的版本。但是因为ES特性的更改3.0以上的版本会出现 require 相关的问题所以需要降低版本不然会报错ReferenceError: require is not defined 错误相关的问题可以看这 npm install mockjs vite-plugin-mock2.9.6二、配置 vite 的 mock 模式
在 vite.config.js 文件中引入对应插件
import { defineConfig} from vite
import { viteMockServe } from vite-plugin-mock...plugins: [vue(),viteMockServe({mockPath: ./src/mock})]其中我们可以看到mock 插件可以有一些配置其中 mockPath 指的是 mock 接口存放位置例如我这里将 mock 内容都放置在根目录中的src目录下的mock目录中。
除了mockPath这个配置还有一些别的配置项可以选择
{mockPath?: string;ignore?: RegExp | ((fileName: string) boolean);watchFiles?: boolean;enable?: boolean;ignoreFiles?: string[];configPath?: string;
}mockPath type: stringdefault: mock设置模拟.ts 文件的存储文件夹如果watchFilestrue将监视文件夹中的文件更改。 并实时同步到请求结果如果 configPath 具有值则无效 ignore type: RegExp | ((fileName: string) boolean);default: undefined自动读取模拟.ts 文件时请忽略指定格式的文件 watchFiles type: booleandefault: true设置是否监视mockPath对应的文件夹内文件中的更改 enable type: booleandefault: true是否启用 mock 功能 configPath type: stringdefault: vite.mock.config.ts设置模拟读取的数据条目。 当文件存在并且位于项目根目录中时将首先读取并使用该文件。 配置文件返回一个数组 logger type: booleandefault: true是否在控制台显示请求日志
三、写 mock 接口
自己写一些接口当在 mock 模式下向这些接口发送的请求会被 vite 自动拦截并返回接口定义的返回值。
还记得我们在一开始配置 vite-plugin-mock 的时候传入了一个 mockPath 吗我们去 /src/mock 下创建一个 index.js
import { createProdMockServer } from vite-plugin-mock/es/createProdMockServer
import MockMethod from ./apiexport function setupProdMockServer() {createProdMockServer([...MockMethod])
}然后在 src/mock 下创建一个 api.js
export default [{url: /mock/api/test, //请求地址method: get, //请求方式response: () {return {code: 200,msg: ok,data: Math.floor(Math.random() * 30) 1}},},
]解释一下我们干了什么事
首先在 src/mock/index.js 中我们实现了一个函数其中使用了 createProdMockServer 函数并传入了一个数组。接下来当我们使用接口发送请求的时候vite 都会帮我们检查这个接口请求的地址是不是在 mock 中配置过的检查的范围就是 createProdMockServer 中传递的这个数组只有将配置好的接口传入到这里才会生效。
然后我们在 api.js 中定义了一个示例接口这个接口的配置是一个对象形式我写得只是一个简单的示例在发送地址为/mock/api/test的请求的时候会返回一个范围在 0-30 之间的随机数。
mock接口的具体字段选项如下
{// 请求地址url: string;// 请求方式method?: MethodType;// 设置超时时间timeout?: number;// 状态吗statusCode?:number;// 响应数据JSONresponse?: ((opt: { [key: string]: string; body: Recordstring,any; query: Recordstring,any, headers: Recordstring, any; }) any) | any;// 响应非JSONrawResponse?: (req: IncomingMessage, res: ServerResponse) void;
}一个示例项目
