process.env.NODE_ENV详解

一、什么是 process.env.NODE_ENV？

在 Node.js 中，process 是一个全局变量，表示当前的 Node 进程。process.env 包含有关系统环境的信息，但 NODE_ENV 不是默认存在的变量，而是用户自定义的环境变量。它通常用于区分开发环境和生产环境，特别是在构建工具如 Webpack 中。

要查看 process 的基本信息，可以创建一个 process.js 文件，内容如下：

console.log(process);

然后在命令行中执行：

node process.js

这将打印出 process 对象的详细信息，包括 env 属性，但不包括 NODE_ENV。

二、如何配置 process.env.NODE_ENV？

process.env 返回一个包含用户环境信息的对象，可以用来区分开发和生产环境。配置方法如下：

方法 1：配置环境变量

在 Windows 上：

1. 检查是否已设置 NODE_ENV：

   set NODE_ENV
   

2. 如果未设置，则添加环境变量：

   set NODE_ENV=production
   

3. 要追加环境变量：

   set path=%path%;C:\web;C:\Tools
   

4. 删除环境变量：

   set NODE_ENV=
   

在 Linux/macOS 上：

1. 检查是否已设置 NODE_ENV：

   echo $NODE_ENV
   

2. 如果未设置，则添加环境变量：

   export NODE_ENV=production
   

3. 追加环境变量：

   export path=$path:/home/download:/usr/local/
   

4. 删除环境变量：

   unset NODE_ENV
   

5. 显示所有环境变量：

   env
   

注意：设置 NODE_ENV 为 production 后，使用 npm install 只会安装 dependencies 中的依赖，而不会安装 devDependencies。确保在需要时使用 unset NODE_ENV 删除环境变量。

方法 2：使用 DefinePlugin

Webpack 的 DefinePlugin 允许在编译时创建全局变量。可以在 webpack.config.js 中配置如下：

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      }
    })
  ]
};

在 package.json 中的打包配置如下：

"scripts": {
  "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map"
}

运行 npm run dev 后，可以在项目入口文件中打印 process.env.NODE_ENV，以验证配置：

console.log(process.env.NODE_ENV); // 打印结果为 'development'

关于 cross-env

cross-env 是一个用于跨平台设置和使用环境变量的工具。它解决了 Windows 系统在设置环境变量时可能遇到的问题。要使用 cross-env，首先安装它：

npm install --save-dev cross-env

在 package.json 中的脚本命令如下：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "cross-env NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map"
}

三、Vue CLI 3.0 中的 process.env.NODE_ENV

使用 Vue CLI 3 构建的项目简化了配置，因为它自动使用 DefinePlugin 设置 process.env.NODE_ENV。Vue CLI 3 支持三种模式：

• development：在 vue-cli-service serve 下使用
• production：在 vue-cli-service build 和 vue-cli-service test:e2e 下使用
• test：在 vue-cli-service test:unit 下使用

在 package.json 中的脚本命令如下：

{
  "scripts": {
    "dev": "vue-cli-service serve", // 本地开发运行，设置 process.env.NODE_ENV 为 'development'
    "build": "vue-cli-service build" // 默认打包模式，设置 process.env.NODE_ENV 为 'production'
  }
}