process.env.NODE_ENV 的确定与使用

process.env.NODE_ENV 是一个环境变量，用于指示当前的执行环境（例如开发环境或生产环境）。它通常在构建或运行应用时被设置。

设置 process.env.NODE_ENV

1. 通过命令行:

   • 在运行 Vue CLI 的命令时，可以直接设置环境变量：
     • 开发环境（默认）:

       npm run serve
       

     • 生产环境:

       NODE_ENV=production npm run build
       

       在 Windows 上：

       set NODE_ENV=production && npm run build
       

2. 通过 .env 文件:

   • 可以在项目根目录下创建 .env 文件，并在其中定义环境变量。
   • 例如，您可以创建以下文件：
     • .env.development:

       NODE_ENV=development
       

     • .env.production:

       NODE_ENV=production
       

3. 在脚本中通过 Node.js:

   • 不推荐直接在 Node.js 脚本中设置 process.env.NODE_ENV，因为这可能会导致不可预测的行为。

使用 process.env.NODE_ENV

在代码中，可以通过 process.env.NODE_ENV 来判断当前环境并进行不同的配置或逻辑处理。例如：

if (process.env.NODE_ENV === 'production') {
  console.log('Running in production mode');
} else {
  console.log('Running in development mode');
}

Vue CLI 的环境变量配置文件

在 Vue CLI 项目中，运行 npm run build 和 npm run serve 时，默认加载的环境变量配置文件如下：

默认加载的配置文件

1. 开发环境 (npm run serve):

   • .env.development: 适用于开发环境，默认加载。
   • .env: 通用配置，适用于所有环境。

2. 生产环境 (npm run build):

   • .env.production: 适用于生产环境，默认加载。
   • .env: 通用配置，适用于所有环境。

加载顺序

• npm run serve 时，加载顺序为：

  1. .env.development
  2. .env

• npm run build 时，加载顺序为：

  1. .env.production
  2. .env

设置多个环境

您可以为不同的环境创建不同的 .env 文件：

• .env: 通用变量。
• .env.development: 开发环境。
• .env.production: 生产环境。
• .env.test: 测试环境。

示例

假设您有以下环境文件：

• .env:

  VUE_APP_API_URL=https://api.example.com
  

• .env.development:

  VUE_APP_API_URL=http://localhost:3000
  

• .env.production:

  VUE_APP_API_URL=https://api.production.com
  

• .env.test:

  VUE_APP_API_URL=http://localhost:4000
  

运行不同环境的构建

• 开发环境构建:

  • 使用命令 npm run serve，加载 .env.development 和 .env 文件。

• 生产环境构建:

  • 使用命令 npm run build，加载 .env.production 和 .env 文件。

• 测试环境构建（自定义）:

  • 创建 .env.test 文件并使用类似 npm run build --mode test 的命令来加载测试环境的配置。

示例 package.json

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

小结

• process.env.NODE_ENV 用于指示当前环境，通常在运行或构建时通过命令行或 .env 文件设置。
• Vue CLI 会根据当前环境自动加载相应的 .env 文件，您可以为不同环境创建多个环境配置文件以满足需求。

---