关于 Vite 中环境变量（.env 文件）自定义打包的使用
关于 Vite 中环境变量（.env 文件）的使用，之前涉及的核心知识点整理如下，包括文件规则、变量定义、使用方式和打包注意事项：
一、.env 文件的基本规则
Vite 会根据环境自动加载对应的 .env 文件，文件命名和优先级遵循：
- 通用文件：
.env（所有环境通用，优先级最低）。 - 开发环境：
.env.development（npm run dev时加载）。 - 生产环境：
.env.production（npm run build时加载，打包时生效）。 - 自定义环境：
.env.[mode]（如.env.test，需通过vite --mode test指定加载）。
优先级：自定义环境 > 生产/开发环境 > 通用.env（后加载的会覆盖先加载的同名变量）。
二、环境变量的定义规则
- 前缀要求：变量名必须以
VITE_开头（Vite 约定，避免与系统变量冲突），例如：# .env.production 示例 VITE_BASE_URL = https://api.prod.com # 生产环境接口地址 VITE_DEBUG = false # 生产环境是否开启调试 - 特殊变量：
NODE_ENV会由 Vite 自动注入（无需手动定义）：- 开发环境：
NODE_ENV = 'development' - 生产环境：
NODE_ENV = 'production'
- 开发环境：
3.特殊变量：NODE_ENV 会由 Vite 自动注入（无需手动定义）：
import.meta.env.MODE 是 Vite 提供的环境模式变量，核心作用是告诉你当前项目运行在哪个环境（比如开发、测试、生产），方便执行不同的业务逻辑。
一、核心作用
它的值由你执行的命令决定，对应你之前配置的 “自定义打包命令”，直接关联 .env.[mode] 文件：
| 执行命令 | import.meta.env.MODE 的值 | 对应环境 | 加载的 .env 文件 |
|---|---|---|---|
npm run dev | development | 开发环境 | .env.development |
npm run build | production | 生产环境 | .env.production |
npm run build:test | test | 测试环境 | .env.test |
简单说：MODE 的值就是你命令里 --mode 后面的参数（没写就是默认的 development 或 production）。
三、关键注意点
- 无需手动定义：
import.meta.env.MODE是 Vite 自动注入的，不用在.env文件里写，直接用就行。 - 区分
MODE和NODE_ENV：MODE：自定义的环境模式（如test、pre，由你命令决定）；NODE_ENV：Vite 自动设置的环境类型（只有development或production）。比如执行npm run build:test时，MODE=test，但NODE_ENV=production（因为是打包操作）。
总结
import.meta.env.MODE 就是你 “环境的标识”，让你能在代码里根据不同环境（开发 / 测试 / 生产）写不同逻辑，不用手动改配置，配合自定义打包命令使用超方便。
三、在代码中使用环境变量
1.客户端代码（浏览器环境）：通过 import.meta.env 访问，例如：
// 接口请求基础地址
const baseUrl = import.meta.env.VITE_BASE_URL;// 判断是否为生产环境
if (import.meta.env.NODE_ENV === 'production') {console.log('当前是生产环境');
}配置文件（vite.config.js）：通过 loadEnv 函数加载，例如：
import { defineConfig, loadEnv } from 'vite';export default defineConfig(({ mode }) => {// 加载对应环境的 .env 文件（mode 为当前环境，如 'production'）const env = loadEnv(mode, process.cwd());return {// 使用环境变量配置基础路径base: env.VITE_BASE_PATH || '/',};
});四、打包（生产环境）相关注意事项
- 打包时的环境变量：
npm run build会自动加载.env.production，变量会被静态替换到代码中（打包后无法动态修改）。- 例如代码中的
import.meta.env.VITE_BASE_URL会被替换为.env.production中定义的具体值。
- 例如代码中的
- 敏感信息处理：
.env文件中的变量会被打包到前端代码中，不要存放密钥、Token 等敏感信息（会暴露给浏览器）。 - 不同环境打包：如需打包测试环境，可通过
--mode指定 # 加载 .env.test 并打包 npm run build --mode test- 变量类型：环境变量的值默认是字符串，如需布尔值 / 数字，需在代码中手动转换：
// .env 中 VITE_DEBUG = 'true'（字符串）
const isDebug = import.meta.env.VITE_DEBUG === 'true'; // 转为布尔值五.在 Vite 中，自定义打包命令可以通过修改 package.json 中的 scripts 配置，结合 --mode 参数指定环境，实现 “一键打包不同环境”（如测试环境、预发布环境等）。以下是具体用法和示例：
核心思路
通过 package.json 定义不同的命令，每个命令对应一个环境（如 build:test 对应测试环境，build:prod 对应生产环境），命令中用 --mode [环境名] 指定加载对应的 .env.[环境名] 文件，从而实现不同环境的打包配置。
步骤 1：创建对应环境的 .env 文件
假设需要区分 开发、测试、生产 三个环境，先创建 3 个 .env 文件：
# .env.development（开发环境，npm run dev 时默认加载）
VITE_BASE_URL = https://api.dev.com
VITE_ENV = "development"# .env.test（测试环境，自定义命令加载）
VITE_BASE_URL = https://api.test.com
VITE_ENV = "test"# .env.production（生产环境，npm run build 时默认加载）
VITE_BASE_URL = https://api.prod.com
VITE_ENV = "production"步骤 2：在 package.json 中定义自定义命令
修改 scripts 字段，添加自定义打包命令（如 build:test 对应测试环境）：
{"scripts": {"dev": "vite", // 开发环境（默认加载 .env.development）"build": "vite build", // 默认生产环境（加载 .env.production）"build:test": "vite build --mode test", // 测试环境打包（加载 .env.test）"build:pre": "vite build --mode pre" // 预发布环境（需创建 .env.pre）}
}- 命令格式：
vite build --mode [环境名]，其中[环境名]对应.env.[环境名]文件的前缀。
步骤 3：使用自定义命令打包
执行对应的命令，即可按指定环境打包：
# 打包测试环境（加载 .env.test）
npm run build:test# 打包生产环境（默认，加载 .env.production）
npm run build# 打包预发布环境（加载 .env.pre）
npm run build:pre步骤 4：在代码中区分环境（可选）
打包后，代码中可通过 import.meta.env 访问当前环境的变量，实现环境差异化逻辑：
// 接口请求地址（自动根据打包环境切换）
const baseUrl = import.meta.env.VITE_BASE_URL;// 打印当前环境
console.log('当前环境：', import.meta.env.VITE_ENV); // 如 "test" 或 "production"进阶：自定义打包输出目录（可选）
如果需要不同环境打包到不同目录（如 dist-test、dist-prod），可在 vite.config.js 中根据环境动态配置 outDir：
import { defineConfig, loadEnv } from 'vite';export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd());return {build: {// 根据环境名设置输出目录（如 test 环境输出到 dist-test）outDir: `dist-${mode}`}};
});执行 npm run build:test 后，产物会输出到 dist-test 目录，方便区分不同环境的打包结果。
总结
自定义打包命令的核心是：package.json 中用 --mode 绑定环境名 + 对应 .env.[环境名] 文件配置变量 + 执行命令时自动加载，实现 “一套代码，多环境打包”，无需手动修改配置。