Vue CLI 3+ 中配置多环境变量的实践
使用 vue.config.js 管理开发、测试与生产环境配置
在 Vue CLI 3 及以上版本中，项目结构进行了优化，移除了传统的 build 与 config 目录。取而代之的是通过 vue.config.js 文件进行 Webpack 的自定义配置，同时支持基于环境变量的多环境管理。
环境变量配置方式
通过在项目根目录创建不同环境的配置文件，可实现自动加载对应环境变量。所有自定义变量需以 VUE_APP_ 开头，否则不会被注入到客户端代码中。
本地开发环境
创建文件：.env.development
// .env.development
NODE_ENV = development
VUE_APP_API_BASE = 'https://api.dev.example.com'
VUE_APP_DEBUG = true测试环境
创建文件：.env.test
// .env.test
NODE_ENV = test
VUE_APP_API_BASE = 'https://api.test.example.com'
VUE_APP_DEBUG = false生产环境
创建文件：.env.production
// .env.production
NODE_ENV = production
VUE_APP_API_BASE = 'https://api.prod.example.com'
VUE_APP_DEBUG = falsepackage.json 脚本配置
在 package.json 中定义运行命令，指定环境模式：
{
"scripts": {
"dev": "vue-cli-service serve",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build --mode production"
}
}在应用中使用环境变量
可在任意 JavaScript 模块中访问这些变量，例如在 main.js 或组件中：
console.log(process.env.NODE_ENV); // development / test / production
console.log(process.env.VUE_APP_API_BASE); // API 地址根据环境变化
console.log(process.env.VUE_APP_DEBUG); // 控制调试开关运行时行为说明
npm run dev：默认加载.env.development，用于本地开发。npm run build:test：启用--mode test，读取.env.test配置。npm run build:prod：构建生产包，使用.env.production配置。
若未明确指定模式，vue-cli-service build 默认使用 production 模式。
注意事项
- 自定义环境变量必须以
VUE_APP_为前缀，否则无法被注入到前端代码中。 - 不要在环境文件中设置
baseUrl等已被保留的关键字段（除非特别需要）。 - 建议将敏感信息如 token、密钥等避免直接写入环境文件，可通过后端接口动态获取。
此机制使得项目在不同阶段具备独立的配置能力，提升部署灵活性和安全性。
