前端 Mock 管理方案

126 阅读1分钟

前言

当我们在项目开发中,可能会遇到后端服务器下线的情况,但是为了防止不影响前端开发流程,所以就需要前端集成 Mock 环境,主要实现以下几个方面:

  1. 在 dev 环境下使用后端的 api 接口,如果没有提供接口可以使用 mock 数据
  2. 在 mock 环境下全部使用 mock 数据

环境配置

.env.development

image.png

.env.mock

image.png

项目启动

  • npm run dev 启动开发环境
  • npm run dev:mock 启动 Mock 环境

需要在 package.json 中的 scripts 配置:"dev:mock": "vite --mode mock"

API 文件

image.png

在开发环境下,API 文件中,如果需要使用后端的 API 接口,则使用 prefixUrl

  1. 在开发环境下会变成约定的 API 前缀
  2. 如果在 Mock 环境下,则均会变成 /mock

如果需要使用 mock 数据,则针对单个请求将路径前缀写为 /mock,例如 getCaptchaInfoApi,则这个文件在任何任何环境下都使用 mock 数据。

在 Mock 环境下,API 均使用 /mock

Mock 文件

image.png

这里有 import.meta.env.VITE_BASE_API 的原因是因为 Mock 与 API IP 需要保持一致。否则 API 与 Mock 路径匹配不一致则不会生效。