一、简介
Vue CLI 是一个强大的前端工程化工具，它提供了丰富的配置选项，包括环境变量的管理。环境变量允许开发者根据不同的运行环境（如开发、测试和生产）应用不同的配置，而无需更改代码。本文将详细介绍如何在 Vue CLI 项目中使用环境变量。
二、 环境变量的基础
在 Vue CLI 项目中，环境变量可以通过 .env 文件系列进行管理。这些文件包括：
- .env：默认的环境变量文件，所有环境都会加载。
- .env.local：本地环境变量文件，不会被 Git 跟踪，可用于覆盖 .env 中的变量。
- .env.development、.env.production、.env.test：分别对应开发、生产和测试环境的变量。
三、使用环境变量
1. 定义环境变量
在 .env 文件中定义环境变量，例如：
VUE_APP_TITLE=My Application
VUE_APP_API_URL=https://api.example.com
2. 在代码中访问环境变量
在 Vue 应用中，通过 process.env 对象访问环境变量：
console.log(process.env.VUE_APP_TITLE); // 输出: My Application
注意，环境变量名前会加上
VUE_APP_前缀，这是 Vue CLI 的要求。
3. 条件性加载环境变量
Vue CLI 允许你根据不同的环境加载不同的变量。例如，要为生产环境定义特定的变量，可以使用 .env.production 文件：
VUE_APP_PRODUCTION_ONLY_VAR=This is only in production
四、环境模式的配置
1. 设置 NODE_ENV
NODE_ENV 是一个特殊的环境变量，用于指定当前的运行模式。Vue CLI 会根据 NODE_ENV 自动加载对应的 .env 文件：
- development：开发模式
- production：生产模式
- test：测试模式
可以通过命令行参数设置 NODE_ENV，例如：
NODE_ENV=production vue-cli-service build
2. 在 vue.config.js 中使用环境变量
在 vue.config.js 中，你可以使用环境变量来自定义配置：
module.exports = {devServer: {proxy: {'/api': {target: process.env.VUE_APP_API_URL}}}
};
五、环境变量的高级用法
1. 端口配置
在 .env 文件中设置端口号：
VUE_APP_PORT=8080
然后在 vue.config.js 中使用：
module.exports = {devServer: {port: process.env.VUE_APP_PORT}
};
2. 静态资源的公共路径
设置项目的 publicPath 来定义静态资源的根路径：
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/cdc-dp/' : '/'
};
3. 环境特定的配置文件
创建环境特定的配置文件，例如 vue.config.development.js 和 vue.config.production.js，Vue CLI 会根据 NODE_ENV 自动选择加载。
六、总结
Vue CLI 的环境变量功能为前端项目提供了极大的灵活性和便利性。通过合理使用环境变量，可以轻松管理不同环境下的配置，实现项目的快速部署和高效运行。掌握环境变量的使用，是前端工程化的重要一步。
注意：在使用环境变量时，请确保不要将敏感信息（如API密钥、数据库密码等）硬编码在代码中。对于生产环境的变量，应使用安全的配置管理方式。
