Vue3+Vite2环境变量配置，分别配置本地，测试，正式

第一步：

在Vue项目创建三个文件分别为.env .env.development .env.production与Vite.config.js同级别

//.env(配置本地开发地址)

VITE_HOST = '172.20.25.155'
VITE_PORT = 8080
VITE_BASE_URL = './'
VITE_OUTPUT_DIR = 'dist'
VITE_API_DOMAIN = 'http://10.1.1.111:8080/api/'//本地环境地址（可用于开发时联调）

//.env.development(配置测试环境地址)

NODE_ENV = development
VITE_API_DOMAIN = 'http://aaa.com:8080/api'//测试环境地址

//.env.production(配置正式环境地址)

NODE_ENV = production
VITE_API_DOMAIN = 'http://fund-wx.aisidicredit.com/wechat-api'//正式环境地址

第二步

Vite.config.js配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const fs = require("fs")
const dotenv = require("dotenv")
const { resolve } = require('path') // 编辑器提示 path 模块找不到，可以yarn add @types/node --dev

export default ({ command, mode }) =>{
	let NODE_ENV =  process.env.NODE_ENV || 'development';
	let envFiles = [];
	//根据不同的环境使用不同的环境变量
	if(command == 'serve'){
		envFiles = [
			/** default file */
			`.env`
		]
	}else{
		envFiles = [
			/** default file */
			`.env`,
			/** mode file */
			`.env.${NODE_ENV}`
		]
	}
	for (const file of envFiles) {
		const envConfig = dotenv.parse(fs.readFileSync(file))
		for (const k in envConfig) {
			process.env[k] = envConfig[k]
		}
	}
	return defineConfig({
		plugins: [vue()],
		resolve: {
		    alias: {
		      '@': resolve(__dirname, 'src') // 设置 `@` 指向 `src` 目录
		    }
		},
		server: {
			host: process.env.VITE_HOST,
			port: process.env.VITE_PORT,
			// 是否自动在浏览器打开
			open: true,
			// 是否开启 https
			https: false,
			// 服务端渲染
			ssr: false,
			base: process.env.VITE_BASE_URL,
			outDir: process.env.VITE_OUTPUT_DIR,
			proxy: {
			  '/api': {
				target: 'http://api网关所在域名',
				changeOrigin: true,
				rewrite: (path) => path.replace(/^/api/, '')
			  },
			}
		},
	})
}

第三步package.json配置

//可根据自己的打包命令配置命令名称
"scripts": {
    "dev": "vite",
    "test": "cross-env vite build --mode development",
    "build": "cross-env vite build --mode production"
  }