关于vue3项目中 vite.config.js项目配置 多个请求地址代理配置

关于VUE3 vite.config.js文件配置相关

提示：本文记录了我们项目中使用到了多个不同的接口请求前缀地址配置代理，如果有更好的优化方案欢迎大佬指点呀：

以下是我最近项目中的vite.config.js文件配置，由于刚开始vue3不久，希望各位大佬不吝赐教，快来分享你们的配置呀。

---

vite.config.js配置如下

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig, loadEnv } from 'vite';
import path from 'path';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';

export default defineConfig(({ mode }) => {
	// 加载 .env 文件
	const env = loadEnv(mode, process.cwd());
	return {
		// host: "192.168.X.XXX", 这里改为自己的IP地址可以让同事直接访问自己本地，方便及时看到效果
		base: env.VITE_PUBLIC_PATH,
		resolve: {
			alias: {
				'@/': `${path.resolve(__dirname, 'src')}/`,
			},
		},
		server: {
			port: Number(env.VITE_PORT),
			proxy: {
				[env.VITE_BASE_API]: {
					// rewrite: (path) => path.replace(/^\/api/, ""),
					target: env.VITE_PROXY_API,
					changeOrigin: true,
				},
				[env.VITE_BASE_API1]: {
					target: env.VITE_PROXY_API,
					changeOrigin: true,
				},
				[env.VITE_BASE_API2]: {
					target: env.VITE_PROXY_API,
					changeOrigin: true,
				},
				[env.VITE_BASE_API3]: {
					target: env.VITE_PROXY_API,
					changeOrigin: true,
				},
				// [env.VITE_BASE_UPLOADS]: {
				// 	target: env.VITE_PROXY_UPLOADS,
				// 	changeOrigin: true,
				// },
			},
		},
		build: {
			chunkSizeWarningLimit: 1500,
		},
		plugins: [
			vue(),
			legacy({
				targets: ['defaults', 'not IE 11'],
			}),
		],
		css: {
			preprocessorOptions: {
				scss: {
					// 关闭编译时 字符编码 报错问题
					charset: false,
				},
			},
		},
	};
});

vite.config文件中引入的.env文件配置如下

由于此项目我们使用到了多个baseapi 前缀，故此处配置多个

VITE_APP_TITLE=我的项目名
VITE_PROXY_API=https://xxxxx.com 
VITE_PORT=9521
VITE_PUBLIC_PATH=./
VITE_BASE_API=/ctx-coop-member
VITE_BASE_API1=/ctx-coop-user
VITE_BASE_API2=/ctx-coop-portal
VITE_BASE_API3=/ctx-coop-finance