利用process.env环境变量实现开发生产环境分支控制

在前端项目中，甄别开发环境与生产环境是一项基础且关键的实践。无论是启用调试工具、切换API接口地址，还是管理功能开关，都离不开对环境变量的精确控制。谈到环境变量，process.env.NODE_ENV无疑是最常用、也是最可靠的“状态指示灯”。

它的运行机制非常直观：在项目启动或构建过程中，该变量会被注入并“固定”在代码里。因此，它不依赖运行时动态读取，性能出色且不会产生副作用，是实现环境判断的坚实根基。

理解 NODE_ENV 的来源与默认行为

通常，我们无需手动设置它。像 Vue CLI 或 Webpack 这类现代构建工具，已经根据您执行的命令自动预设了合理的值：

• 当您运行 vue-cli-service serve 启动开发服务器时，工具会自动进入开发模式，此时 process.env.NODE_ENV 的值为 "development"。
• 执行 vue-cli-service build 进行生产构建时，默认启用生产模式，对应值即为 "production"。
• 您也可以手动指定模式，例如执行 vue-cli-service build --mode staging。此时，NODE_ENV 的值会优先取自 .env.staging 文件中的定义；若文件未定义，则回退为字符串 "staging"。

基于 NODE_ENV 的代码逻辑分支控制

有了明确的环境标识，在代码中进行分支判断便十分清晰。核心是基于 process.env.NODE_ENV 这个字符串进行等值比较，务必加上引号以防止类型误判。

• 开发环境下启用调试工具：
  if (process.env.NODE_ENV === 'development') { console.log('开启 Vue Devtools'); }
• 生产环境中关闭敏感日志或调试头：
  if (process.env.NODE_ENV !== 'development') { axios.defaults.headers.common['X-Debug'] = undefined; }
• 不同环境加载不同的 API 基地址：
  const API_BASE = process.env.NODE_ENV === 'production' ? 'https://api.example.com' : 'http://localhost:3000';

结合 .env 文件管理可变配置

仅靠 NODE_ENV 有时不够灵活，因为不同环境下的配置差异可能很大。此时，需要搭配使用以 VUE_APP_ 开头的自定义环境变量。

• 在项目根目录创建 .env.development 文件，定义开发环境专属变量：
  VUE_APP_API_URL=http://localhost:8080/api
VUE_APP_FEATURE_FLAG=true
• 创建 .env.production 文件，定义生产环境配置：
  VUE_APP_API_URL=https://prod-api.example.com
VUE_APP_FEATURE_FLAG=false
• 这些变量在构建时会被静态替换到代码中，在组件中可直接使用：
  fetch(process.env.VUE_APP_API_URL + '/user')
• 需要注意安全边界：只有 NODE_ENV、BASE_URL 和以 VUE_APP_* 开头的变量才会被打包到前端代码中。像数据库密码这类敏感信息（如 DB_PASSWORD）绝对不会被包含。

确保跨平台命令兼容性

团队协作时，开发者的操作系统可能各不相同。在 package.json 的 scripts 脚本中设置环境变量，Windows 与 macOS/Linux 的语法存在差异。为保证脚本在任何机器上都能正确执行，推荐使用 cross-env 工具统一处理。

• 首先安装它：npm install cross-env --save-dev
• 然后在 package.json 中配置脚本：
  

  "scripts": {
    "build:prod": "cross-env NODE_ENV=production vue-cli-service build",
    "build:test": "cross-env NODE_ENV=staging vue-cli-service build --mode staging"
  }

• 这样一来，无论团队使用的是 Windows、macOS 还是 Linux，执行构建命令时都能正确注入 NODE_ENV 变量，有效避免因系统差异导致的本地构建失败问题。