【Webpack \ Vite】多环境配置

环境变量
脚本命令

如何通过不同的环境变量或不同的配置文件进行项目区分，动态加载配置。通常，使用环境变量是最简单且灵活的方法，因为它不需要改变构建命令或创建多个配置文件

环境变量

在根目录下创建 .env.xxx 文件，为不同的环境设置不同的变量

javascript 复制代码

.env       				// 在所有环境中被载入
.env.local 				// 在所有环境中被载入，但会被 git 忽略
.env.[mode] 			// 只在指定的模式中被载入
.env.[mode].local 		// 只在指定的模式中被载入，但会被 git 忽略

React中必须以 REACT_APP_ 前缀来定义环境变量，Vue中必须以 VUE_APP_ 开头，Vite项目中环境变量必须 VITE_ 开头（ 其中 NODE_ENV 是内置的环境变量，不需要前缀 ）修改环境变量后需要重启开发服务器才能生效，环境变量在构建时会被静态替换

javascript 复制代码

.env  					// 全局默认配置文件，无论什么环境都会加载合并
.env.development        // 开发环境
.env.production 		// 生产环境

// 等等......

当全局的配置文件和环境的配置文件有相同配置项时，环境的配置项会覆盖全局的配置项。可使用 # 添加注释，注释内容不会被解析 当环境变量里面有特殊字符时，框架是无法识别的；需要将字符加上引号包括一下，取决于字段的值是否包含特殊字符

javascript 复制代码

本地命令参数 > 环境文件 > .env

创建文件并配置变量： 根据需要进行自定义创建

json 复制代码

// .env.test
NODE_ENV = test
VUE_APP_API_BASE = https://www.baidu.com
VUE_APP_WS_ENDPOINT = ws://dev.example.com
				//......

// .env.uat 
NODE_ENV = uat
VUE_APP_API_BASE = https://api.example.com
				//......

// 等等......

代码中的使用： 可以通过 process.env.XXX 直接访问这些配置项

javascript 复制代码

//接口基础路径
const baseURL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE : '/api'

//WebSocket连接
const socket = new WebSocket(process.env.VUE_APP_WS_ENDPOINT)

//构建配置
module.exports = {
	publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
	configureWebpack: config => {
		if (process.env.NODE_ENV === 'production') {
			return {
				// 生产环境的webpack配置
			};
		} else {
			return {
				// 开发环境的webpack配置
			};
		}
	}
}

//状态管理
const state={
	env:process.env.VUE_APP_API_BASE_URL, 
};

Vite项目中：通过 import.meta.env 访问这些环境变量

javascript 复制代码

console.log(import.meta.env.MODE);  // 在 Vue 组件或任何 JS 文件中

脚本命令

在 package.json 文件中，scripts 部分用于定义 npm 脚本，这些脚本可以在命令行中通过 npm run <script-name> 命令执行

--mode ：指定环境（如果有的话就按指定的来；没有就按默认的来）

javascript 复制代码

"scripts": {
	"serve": "vue-cli-service serve",  //启动项目，并且加载.env和.env.development文件
	
	"serve:test": "vue-cli-service serve --mode test",  //启动项目，并且加载.env和.env.test文件
	
	"build": "vue-cli-service build",  //生产环境打包，其中.env和.env.production文件会加载
	
	"test": "vue-cli-service build --mode test", //测试环境打包，其中.env和.env.test文件会加载
	
	"all": "vue-cli-service build && vue-cli-service build --mode test", //生产环境和测试环境同时打包，加载不同的.env文件
},

cross-env 工具：跨平台环境变量设置，cross-env 允许你在不同操作系统（如 Windows 和 Unix/Linux）上统一设置环境变量。因为在 Windows 和 Unix 系统中设置环境变量的方式不同，使用 cross-env 可以避免这些差异

javascript 复制代码

npm install --save-dev cross-env

javascript 复制代码

"scripts": {
	"dev": "cross-env NODE_ENV=development vue-cli-service serve",
	"build": "cross-env NODE_ENV=production vue-cli-service build"
}

//使用 cross-env 来设置 NODE_ENV 环境变量