在vite项目中使用mock.js

5,373 阅读1分钟

通过在vite项目中引入mockjs,可以更方便快捷的通过模拟数据来验证代码逻辑,进而降低在联调过程中出现问题的概率

步骤: 1、安装 mockjs、vite-plugin-mock

pnpm i mockjs vite-plugin-mock -D

2、在vite.config.js中引入插件

import { viteMockServe } from "vite-plugin-mock";

export default defineConfig(({ command, mode }) => ({

plugins: [

vue(),
viteMockServe({
mockPath: "./mock",  // mock文件存放的位置
localEnabled: command === "serve" && mode === "mock", //在开发环境中启用 mock
}),
],
}));

3、根据配置的路径创建对应的文件夹,并在文件夹下创建默认的入口 index.ts,内容如下:

image.png

// mock/index.ts

export default []

4、在 package.json 中配置 mock 的入口

image.png

5、通过mock启动项目,并通过 axios 请求验证 mock 是否配置完成

mock 文件: mock/test/getUserInfo.ts

image.png

接口调用:

image.png

控制台验证:

image.png

此时,mock 配置已经成功了,之后就可以在项目中去使用它了