Vue CLI 通过 NODE_ENV 确定当前是开发还是生产环境

1. NODE_ENV 的作用

• NODE_ENV 是 Node.js 提供的一个全局环境变量，表示当前的运行环境。
• 在 Vue 项目中，Vue CLI 会自动为以下两种命令设置 NODE_ENV：
  • 开发环境：运行 npm run serve 时，NODE_ENV 被设置为 development。
  • 生产环境：运行 npm run build 时，NODE_ENV 被设置为 production。

通过 NODE_ENV 的值，Vue CLI 能自动加载对应的 .env 文件内容。

---

2. 加载 .env 文件的逻辑

Vue CLI 会根据以下规则加载环境变量文件：

文件名	加载时机
.env	所有环境都会加载
.env.development	仅在 NODE_ENV=development 时加载
.env.production	仅在 NODE_ENV=production 时加载
.env.test	仅在 NODE_ENV=test 时加载

如果某个变量在多个 .env 文件中都被定义，更具体的环境文件优先级更高，例如：

• NODE_ENV=development 时，.env.development 的变量优先于 .env 的变量。

---

3. 如何判断当前环境

你可以通过 process.env.NODE_ENV 来判断当前运行的环境：

示例：打印当前环境

console.log(process.env.NODE_ENV);

• 如果运行 npm run serve，打印结果是：development。
• 如果运行 npm run build，打印结果是：production。

---

4. 使用 NODE_ENV 判断环境加载不同逻辑

可以在代码中根据 NODE_ENV 的值，执行不同的逻辑。例如：

动态 API 地址配置

const API_URL =
  process.env.NODE_ENV === "development"
    ? "http://localhost:3000"
    : "https://api.production.com";

console.log("当前环境是:", process.env.NODE_ENV);
console.log("API 地址是:", API_URL);

---

5. npm 脚本中如何切换环境

你可以通过设置 NODE_ENV 来切换不同环境。例如：

本地开发环境

npm run serve

这会自动将 NODE_ENV 设置为 development。

生产环境

npm run build

这会自动将 NODE_ENV 设置为 production。

测试环境

需要自定义脚本。例如，在 package.json 中添加以下脚本：

"scripts": {
  "test": "NODE_ENV=test vue-cli-service serve"
}

运行以下命令：

npm run test

此时 NODE_ENV 会被设置为 test。

---

6. 验证加载的环境变量

你可以在代码中验证 process.env 是否正确加载了环境变量：

打印所有加载的环境变量

console.log(process.env);

注意：VUE_APP_ 前缀的变量才会被暴露到客户端，其余的环境变量（如 NODE_ENV）只会用于构建阶段。

---

7. 总结

• Vue CLI 通过 NODE_ENV 确定当前是开发还是生产环境。
• 根据 NODE_ENV 值，Vue CLI 会自动加载对应的 .env 文件。
• 在代码中可以通过 process.env.NODE_ENV 动态判断环境，执行不同逻辑。