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

【拾光静好微微一笑】

已于 2023-11-23 18:16:50 修改

阅读量4k

点赞数 1

文章标签： javascript 前端 vue3 vite.config.js

于 2023-11-23 18:13:00 首次发布

本文链接：https://blog.youkuaiyun.com/Taurus_0811/article/details/134583461

版权

日记专栏收录该内容

3 篇文章

订阅专栏

本文详细描述了作者在Vue3项目中如何配置vite.config.js文件，以处理多个接口请求的代理，并通过.env文件管理不同API前缀。寻求更优解决方案和经验分享。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于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