process.env.NODE_ENV详解

一、 process.env.NODE_ENV是什么？

在node中，有全局变量process表示的是当前的node进程。
process.env包含着关于系统环境的信息，但是process.env中并不存在NODE_ENV这个东西。

NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。

为了查看 process的基本信息，我们可以在文件夹中 新建一个process.js文件，在里面加一句代码console.log(process);然后进入该文件夹，

执行node process.js可以在命令行中打印如下信息：

$ node process.js
process {
  title: 'node',
  version: 'v4.4.4',
  moduleLoadList: 
   [....],
  versions: 
   { http_parser: '2.5.2',
     node: '4.4.4',
     v8: '4.5.103.35',
     uv: '1.8.0',
     zlib: '1.2.8',
     ares: '1.10.1-DEV',
     icu: '56.1',
     modules: '46',
     openssl: '1.0.2h' },
  arch: 'x64',
  platform: 'darwin',
  release: 
   { name: 'node',
     lts: 'Argon',
     sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',
     headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },
  argv: 
   [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
     '/Users/tugenhua/个人demo/process.js' ],
  execArgv: [],
  env: 
   { TERM_PROGRAM: 'Apple_Terminal',
     SHELL: '/bin/zsh',
     TERM: 'xterm-256color',
     TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',
     Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',
     TERM_PROGRAM_VERSION: '404',
     TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',
     USER: 'tugenhua',
     SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',
     PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',
     PWD: '/Users/tugenhua/个人demo',
     LANG: 'zh_CN.UTF-8',
     XPC_FLAGS: '0x0',
     XPC_SERVICE_NAME: '0',
     SHLVL: '1',
     HOME: '/Users/tugenhua',
     LOGNAME: 'tugenhua',
     SECURITYSESSIONID: '186a8',
     OLDPWD: '/Users/tugenhua/工作文档/sns_pc',
     ZSH: '/Users/tugenhua/.oh-my-zsh',
     PAGER: 'less',
     LESS: '-R',
     LC_CTYPE: 'zh_CN.UTF-8',
     LSCOLORS: 'Gxfxcxdxbxegedabagacad',
     NVM_DIR: '/Users/tugenhua/.nvm',
     NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',
     NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',
     NVM_RC_VERSION: '',
     MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',
     NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',
     NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',
     _: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',
     __CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },
  pid: 14034,
  features: 
   { debug: false,
     uv: true,
     ipv6: true,
     tls_npn: true,
     tls_sni: true,
     tls_ocsp: true,
     tls: true },
  _needImmediateCallback: false,
  config: {},
  nextTick: [Function: nextTick],
  _tickCallback: [Function: _tickCallback],
  _tickDomainCallback: [Function: _tickDomainCallback],
  stdout: [Getter],
  stderr: [Getter],
  stdin: [Getter],
  openStdin: [Function],
  exit: [Function],
  kill: [Function],
  mainModule: 
   Module {
     id: '.',
     exports: {},
     parent: null,
     filename: '/Users/tugenhua/个人demo/process.js',
     loaded: false,
     children: [],
     paths: 
      [ '/Users/tugenhua/个人demo/node_modules',
        '/Users/tugenhua/node_modules',
        '/Users/node_modules',
        '/node_modules' ] } }

如上就可以看到 process是node的全局变量，并且process有env这个属性，但是没有NODE_ENV这个属性。

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

process.env属性返回的是一个包含用户环境信息的对象，它可以区分开发环境或正式环境的依据，那么vue2.0中我们如何配置它呢？

如果采用的是webpack打包方式，注册下面这个插件既可以让其他文件访问到process.env.NODE_ENV

const webpack = require('webpack');
module.exports = {
  // ...
  plugins: [
    // DefinePlugin允许我们创建全局变量，可以在编译时进行设置
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    })
  ]
  // ...
}

现在看看如何在项目中切换环境变量：

let env = process.env.NODE_ENV
let cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
let cssSourceMapProduct = (env === 'production' && config.build.productionSourceMap)
let useCssSourceMap = cssSourceMapDev || cssSourceMapProduct

我们可以根据process.env.NODE_ENV的值来选择编译打包什么文件。

三、vue-cli3.0中的process.env.NODE_ENV

使用vue-cli3构建的项目就简单多了，因为vue-cli3使用上述的DefinePlugin方式帮你把process.env.NODE_ENV配置好了，我们不需要再自己去配置。
它自带了三种模式：

development：在vue-cli-service serve下，即开发环境使用
production：在vue-cli-service build 和 vue-cli-service test:e2e下，即正式环境使用
test：在vue-cli-service test:unit下使用

在package.json中的scripts命令如下:

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

在 Vue 中， NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式：

• npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。

• npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。

除了以键值对的方式修改外，也可以在命令后直接使用 --mode 参数手动指定模式。