一、简介

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密钥、数据库密码等）硬编码在代码中。对于生产环境的变量，应使用安全的配置管理方式。