vite proxy同时配置多个代理

背景

前端开发时会碰到有些后端接口未开发完成，需要进行本地mock，这个时候就需要配置多个代理，开发完成的接口连接本地或者测试环境后端，未开发完成的接口连接本地mock。

实现步骤

1. 修改.env.development
   里面一般有一个如下的配置

   VITE_APP_BASE_API='/api'
   

   在之后添加一行

   VITE_APP_BASE_API_MOCK='/api-mock'
   

2. 将request.js或者request.ts 一般放在utils目录下，拷贝一份，重命名为request-mock.js或者request-mock.ts
3. 将request-mock.js里面的 VITE_APP_BASE_API 全部替换为 VITE_APP_BASE_API_MOCK
4. 修改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
   		}
   	}
   }