使用 Vue CLI 管理环境变量的最佳实践在 Vue 项目开发中，管理环境变量是一个常见需求。Vue 项目通常需要为不

在 Vue 项目开发中，管理环境变量是一个常见需求。Vue 项目通常需要为不同环境（如开发、测试、生产）设置不同的 API 地址、调试开关等配置。为了简化这一过程，Vue CLI 提供了 .env 文件和 --mode 模式的支持，使得环境变量管理更灵活和高效。本文将详细介绍在 Vue CLI 中使用环境变量的最佳实践。

一、什么是 `vue-cli-service`？

vue-cli-service 是 Vue CLI 提供的一个命令行工具，用于简化 Vue 项目开发的各项任务。vue-cli-service 是 Vue CLI 的核心，通过它可以完成以下常见操作：

启动本地开发服务器
生成生产环境的构建文件
运行单元测试或端到端测试

1. `vue-cli-service` 的安装

在通过 Vue CLI 创建项目时，Vue CLI 会自动安装 @vue/cli-service 包，这个包包含了 vue-cli-service 命令行工具。这个工具默认安装在项目的 node_modules/.bin 目录下。因此在 Vue 项目中，可以通过本地路径执行 vue-cli-service，无需全局安装。

2. `vue-cli-service` 的执行方式

因为 vue-cli-service 是项目的本地依赖，有两种常见的执行方式：

使用 npx 执行： npx 是一个 Node.js 自带的工具，用于临时调用项目中的命令。例如，运行开发服务器时可以使用：
```
npx vue-cli-service serve
```
通过 npm run 执行：在 package.json 文件中，Vue 项目通常会定义一些脚本来运行 vue-cli-service 命令。例如：
```
"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build"
}
```
这样可以直接使用 npm run serve 来启动开发服务器，或 npm run build 来构建项目。npm run 会自动在项目的 node_modules 中查找 vue-cli-service 并执行相应的命令。

3. `vue-cli-service` 的作用

vue-cli-service 可以简化项目的开发和构建过程，具体包括：

启动开发服务器：运行 vue-cli-service serve，启动一个支持模块热替换（HMR）的本地开发服务器。
构建生产环境代码：运行 vue-cli-service build，打包并优化代码以便部署到生产环境。
执行测试：当安装了 Vue 的测试插件时，vue-cli-service 也可用于运行单元测试和端到端测试。

二、什么是 `process`？

process 是 Node.js 提供的一个全局对象，用于管理和获取有关当前运行进程的信息。在 Vue 项目（特别是在使用 Vue CLI 开发时），process.env 会被用来存储并访问环境变量。

1. `process.env` 的作用

process.env 是 process 对象中的一个属性，用于读取系统和用户定义的环境变量。我们可以通过 process.env 获取到 .env 文件中定义的变量，并在代码中访问。例如：

console.log(process.env.NODE_ENV);       // 输出当前环境，如 'development'、'production'
console.log(process.env.VUE_APP_API_URL); // 输出定义在 .env 文件中的 VUE_APP_API_URL

在 Vue CLI 项目中，通过 .env 文件设置的环境变量会被自动挂载到 process.env 中。需要注意的是，Vue CLI 只会识别以 VUE_APP_ 开头的变量并挂载到 process.env 中，这是为了防止不安全的变量暴露在客户端。

2. `process.env.NODE_ENV`

NODE_ENV 是一个特殊的环境变量，用于区分当前的运行环境。在 Vue CLI 项目中，当使用不同的模式运行时，NODE_ENV 会自动设置为以下几种值：

development：用于开发模式，通过 npm run serve 启动。
production：用于生产模式，通过 npm run build 构建。
test：用于测试模式。

NODE_ENV 主要用于判断代码在不同环境下的执行逻辑，例如：

if (process.env.NODE_ENV === 'development') {
  console.log("运行在开发环境中");
}

三、Vue CLI 环境变量的加载机制

Vue CLI 支持通过 .env 文件管理不同环境的变量。在项目根目录中，Vue CLI 会自动识别以下几种 .env 文件：

.env：所有环境都会加载的通用配置文件。
.env.development：仅开发环境会加载的配置文件。
.env.production：仅生产环境会加载的配置文件。
.env.test：仅测试环境会加载的配置文件。

1. 环境变量文件的加载顺序

Vue CLI 按照以下顺序加载环境变量文件：

.env
.env.[mode]（如 .env.development、.env.production）

如果 .env 和 .env.[mode] 文件中存在同名变量，后者会覆盖前者。例如，如果 .env 和 .env.production 都包含 VUE_APP_API_URL 变量，那么在生产模式下，Vue CLI 会使用 .env.production 中定义的值。

2. 自定义模式

Vue CLI 默认支持 development、production 和 test 三种模式。你也可以通过自定义 --mode 参数来指定其他模式。例如，可以在 package.json 中添加一个 build:staging 命令，指定 staging 模式：

"scripts": {
  "build:staging": "vue-cli-service build --mode staging"
}

这样在执行 npm run build:staging 时，Vue CLI 会自动加载 .env 和 .env.staging 文件。

四、编写 `.env` 文件

1. 文件命名与示例

在项目根目录下创建不同的 .env 文件，如下所示：

.env：通用配置
.env.development：开发环境配置
.env.test：测试环境配置
.env.production：生产环境配置

每个 .env 文件包含的变量必须以 VUE_APP_ 前缀开头，才能被挂载到 process.env 中，供 Vue 项目代码访问。例如：

.env

VUE_APP_TITLE=MyVueApp
VUE_APP_API_BASE_URL=https://default.api.com

.env.development

VUE_APP_API_BASE_URL=https://dev.api.com
VUE_APP_DEBUG=true

.env.production

VUE_APP_API_BASE_URL=https://prod.api.com
VUE_APP_DEBUG=false

2. 使用 `process.env` 访问环境变量

在 Vue 项目中，环境变量可以通过 process.env 访问。以下是一个简单的配置示例：

// src/config.js
export const API_BASE_URL = process.env.VUE_APP_API_BASE_URL;
export const DEBUG_MODE = process.env.VUE_APP_DEBUG === 'true';

然后可以在组件或其他模块中使用这些变量：

import { API_BASE_URL, DEBUG_MODE } from './config';
console.log("API URL:", API_BASE_URL);
console.log("Debug Mode:", DEBUG_MODE);

五、通过命令指定环境模式

在 package.json 中，我们可以通过 --mode 参数指定使用的环境模式。例如：

{
  "scripts": {
    "serve": "vue-cli-service serve --mode development",
    "build:test": "vue-cli-service build --mode test",
    "build:prod": "vue-cli-service build --mode production"
  }
}

npm run serve 会加载 .env 和 .env.development 文件。
npm run build:test 会加载 .env 和 .env.test 文件。
npm run build:prod 会加载 .env 和 .env.production 文件。

通过这种方式，可以为不同的环境定制 API 地址、调试开关等配置，适用于多种开发需求。

六、注意事项和最佳实践

1. `VUE_APP_` 前缀

所有希望在客户端访问的环境变量，都必须以 VUE_APP_ 为前缀。例如 VUE_APP_API_URL，而不是 API_URL。这是 Vue CLI 的限制，用于避免将不安全的变量暴露在客户端中。

2. 字符串和布尔值

.env 文件中的值都是字符串格式，如果需要布尔值或数字，需要在代码中手动转换，例如将 VUE_APP_DEBUG 转换为布尔值：

const DEBUG_MODE = process.env.VUE_APP_DEBUG === 'true';

3. 避免在 `.env` 文件中存储敏感信息

尽量不要在 .env 文件中存储敏感信息，如数据库密码、API 密钥等。如果必须使用敏感信息，建议通过其他方式（例如后端服务或安全存储）来获取。

七、完整示例

以下是一个基于 Vue CLI 的项目环境变量配置的完整示例，包括对 vue-cli-service 和 process.env 的应用：

创建 .env 文件：在项目根目录下创建 .env、.env.development、.env.test 和 .env.production 文件，并定义环境变量。

在 package.json 中配置环境模式：

"scripts": {
  "serve": "vue-cli-service serve --mode development",
  "build:test": "vue-cli-service build --mode test",
  "build:prod": "vue-cli-service build --mode production"
}

在项目代码中，通过 process.env 使用环境变量：

// src/config.js
export const API_BASE_URL = process.env.VUE_APP_API_BASE_URL;

运行不同的 npm 脚本，测试不同模式下的环境配置加载情况：

npm run serve       # 启动开发服务器，加载 .env.development 配置
npm run build:prod  # 构建生产环境代码，加载 .env.production 配置

总结

通过 Vue CLI 提供的 .env 文件和 --mode 参数，可以轻松管理不同环境下的配置。以下是几个关键点：

使用 .env 和 .env.[mode] 文件定义环境变量。
利用 --mode 指定环境模式，自动加载相应配置文件。
只使用 VUE_APP_ 前缀的变量，这些变量才会被挂载到 process.env 上。

希望本文能帮助你在 Vue 项目中更好地管理环境变量！

使用 Vue CLI 管理环境变量的最佳实践

一、什么是 vue-cli-service？

1. vue-cli-service 的安装

2. vue-cli-service 的执行方式

3. vue-cli-service 的作用

二、什么是 process？

1. process.env 的作用

2. process.env.NODE_ENV