最稳妥的环境变量管理方式是使用环境变量文件区分，按规范创建.env.development、.env.test、.env.production三类文件，变量名需以VITE_/REACT_APP_/VUE_APP_开头，通过脚本命令触发对应环境加载，敏感信息不得写入且所有.env.*文件须加入.gitignore。
直接用环境变量文件区分是最稳妥的方式，不用改代码、不依赖构建工具内部逻辑，各框架都支持且原理一致。
按规范建好三类环境文件
在项目根目录下创建以下文件，内容只写键值对，不带引号、不加分号：
-
.env.development：开发时 npm run dev 自动加载，比如
VITE_API_BASE=http://localhost:3000 -
.env.test：测试环境专用，如
VITE_API_BASE=https://test-api.example.com -
.env.production：生产构建时生效，例如
VITE_API_BASE=https://api.example.com
注意变量名必须以 VITE_（Vite）、REACT_APP_（Create React App）或 VUE_APP_（Vue CLI）开头，否则无法被读取。
在代码里安全使用变量
不要硬编码地址，统一从环境变量取值：
- Vite 项目：
import.meta.env.VITE_API_BASE - React 项目：
process.env.REACT_APP_API_BASE - Vue 项目：
process.env.VUE_APP_API_BASE
建议封装成配置对象，避免多处重复引用。例如在 api.ts 中统一导出基础 URL，后续所有请求都基于它拼接路径。
通过脚本命令触发对应环境
package.json 的 scripts 字段决定加载哪个环境文件：
- 开发：
"dev": "vite"→ 自动读 .env.development - 测试打包：
"build:test": "vite build --mode test"→ 加载 .env.test - 生产打包：
"build": "vite build"→ 默认读 .env.production
不需要额外安装 cross-env，现代构建工具已内置支持。执行命令时，对应环境变量会注入到整个构建过程。
关键注意事项
这些细节容易出错，但影响很大：
- 敏感信息（密钥、密码）绝不能写进 .env 文件，应由 CI/CD 流水线注入或使用密钥管理服务
- 把所有 .env.* 文件加进 .gitignore，防止误提交
- 修改 .env 文件后必须重启开发服务器，变量才生效
- 环境变量只在构建时注入，运行时无法动态更改
