vite proxy同时配置多个代理方式

背景

前端开发时会碰到有些后端接口未开发完成，需要进行本地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
		}
	}
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。