前言
当我们在项目开发中,可能会遇到后端服务器下线的情况,但是为了防止不影响前端开发流程,所以就需要前端集成 Mock 环境,主要实现以下几个方面:
- 在 dev 环境下使用后端的 api 接口,如果没有提供接口可以使用 mock 数据
- 在 mock 环境下全部使用 mock 数据
环境配置
.env.development
.env.mock
项目启动
npm run dev启动开发环境npm run dev:mock启动 Mock 环境
需要在
package.json中的scripts配置:"dev:mock": "vite --mode mock"
API 文件
在开发环境下,API 文件中,如果需要使用后端的 API 接口,则使用 prefixUrl:
- 在开发环境下会变成约定的 API 前缀
- 如果在 Mock 环境下,则均会变成
/mock
如果需要使用 mock 数据,则针对单个请求将路径前缀写为 /mock,例如 getCaptchaInfoApi,则这个文件在任何任何环境下都使用 mock 数据。
在 Mock 环境下,API 均使用 /mock。
Mock 文件
这里有
import.meta.env.VITE_BASE_API的原因是因为 Mock 与 API IP 需要保持一致。否则 API 与 Mock 路径匹配不一致则不会生效。