背景
前端开发时会碰到有些后端接口未开发完成,需要进行本地mock,这个时候就需要配置多个代理,开发完成的接口连接本地或者测试环境后端,未开发完成的接口连接本地mock。
实现步骤
- 修改.env.development
里面一般有一个如下的配置
在之后添加一行VITE_APP_BASE_API='/api'
VITE_APP_BASE_API_MOCK='/api-mock'
- 将request.js或者request.ts 一般放在utils目录下,拷贝一份,重命名为request-mock.js或者request-mock.ts
- 将request-mock.js里面的 VITE_APP_BASE_API 全部替换为 VITE_APP_BASE_API_MOCK
- 修改vite.config.js/ts,在proxy中添加一个配置如下;
server: { port: 8888, host: true, open: true, proxy: { '/api': { target: 'http://localhost:8889', changeOrigin: true } '/api-mock': { target: 'http://localhost:8890', changeOrigin: true } } }