通过在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,内容如下:
// mock/index.ts
export default []
4、在 package.json 中配置 mock 的入口
5、通过mock启动项目,并通过 axios 请求验证 mock 是否配置完成
mock 文件: mock/test/getUserInfo.ts
接口调用:
控制台验证:
此时,mock 配置已经成功了,之后就可以在项目中去使用它了