在开始之前我先强调一下： process.env.NODE_ENV默认只有两种状态即development和production，development指代本地开发即localhost环境（本地的开发），而production代表发布在任何服务上的服务（不管是dat、uat还是生产环境），node是不知道你服务是测试还是正式，除非你手动指定。通常认为都是线上环境。所以可以这样认为development代表本地开发环境，production代表线上环境（包括dat、uat和生产环境等）

我为什么会强调这一点呢？

因为有人居然用process.env.NODE_ENV中的development来代表dat，uat等线上的测试环境，所以特别强调一下，development代表本地的开发环境。

最近系统接入了公司的单点登录，为了登陆成功后再跳回系统的主页面，又申请了测试和沙箱的域名（之前都是直接用IP登的），本地开发是配置的host。接入之后发现了一个非常麻烦的点就是给单点登录传的跳转地址每次都要修改，开发的时候要写成开发的域名，测试的时候要改成测试的域名，进沙箱的时候要改成跳转沙箱的域名，上线的时候又要改成线上的域名。特别是在测试阶段，开发测试来回切换，不胜其烦。
于是就想把它写成配置文件，根据不同环境加载不同的配置，这样就不用来回改了。这个时候，process.env就跳入了脑海。

扒一扒process.env

process对象是全局变量，它提供当前node.js的有关信息，以及控制当前node.js的有关进程。因为是全局变量，它对于node应用程序是始终可用的，无需require()。

既然process都是一个对象了，env自然是它的一个属性，这个属性返回包含用户环境信息的对象。在终端输入node后，在输入process.env可以看到打印出来的信息。

主角出场 process.env.NODE_ENV

NODE_ENV不是process.env对象上原有的属性，那它是怎么添加上的呢？

先举个例子：

在package.json中，如下：

{
  "name": "yun-nobile",
  "version": "2.0.0",
  "description": "太保标准移动端产品2.0，基于vue",
  "main": "yunprod.js",
  "scripts": {
    "build": "cross-env NODE_ENV=production node yunprod.js build",
    "dev": "node yunprod.js dev"
  }
  ...
}  

在我们执行 npm run build 脚本命令时，会执行cross-env NODE_ENV=production node yunprod.js build，把NODE_ENV设置为production，所以 process.env.NODE_ENV就被设置为production了 。

所以 process.env.NODE_ENV是我们执行脚本命令时添加上去的一个全局环境变量。

process.env.NODE_ENV用来确定当前所处的开发阶段。一般生产阶段设为production，开发阶段设为develop，然后在脚本中读取process.env.NODE_ENV。
运行脚本时，可以这样改变环境变量, 在package.json文件的scripts里面添加命令：

NODE_ENV=production node build.js

但是这个命令使用Windows的同学拉下代码后就报错了，因为Windows上面设置的方式不一样

set NODE_ENV=production node build.js

但是不同电脑上不同的设置肯定是不行的呀，这个时候cross-env赶来救场了。
cross-env可以跨平台的设置和使用环境变量

npm install --save-dev cross-env

接下来我们就可以通过cross-env来设置了

cross-env NODE_ENV=production node build.js

这样设置之后，我们可以在脚本中使用process.env.NODE_ENV了，但是不能在模块中使用，要想在模块当中直接使用，我们还需要一些配置

在 webpack 4+ 中，你可以使用 mode 选项：

module.exports = {
  mode: 'production'
}

但是在 webpack 3 及其更低版本中，你需要使用 DefinePlugin：

var webpack = require('webpack')

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

这样就可以直接使用啦_
现在我们要在模块中根据环境变量来配置不同的url了

let url = '';
 if (process.env.NODE_ENV === 'testing') {
   url = 'http://my.test.cn';
 } else if (process.env.alpord === 'alpord') {
   url = 'http://my.alpord.cn';
 } else if (process.env.NODE_ENV === 'production') {
   url = 'http://my.product.cn';
 } else {
   url = 'http://my.develop.cn';
 }

或者是

let url = '';
process.env.NODE_ENV === 'production'?url = 'http://my.product.cn':url = 'http://my.test.cn';

到此这篇关于如何设置process.env.NODE_ENV生产环境模式的文章就介绍到这了,更多相关process.env.NODE_ENV设置生产环境模式内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！