webpack4系列第八篇（环境变量和多环境配置）

在开发时可能会碰到多环境的情况，比如在开发时有一个开发服务器：http://localhost:8000，在上线的时候又会有一个正式环境的服务器：http:www.xxx.com,我们需要判断不同的环境来选择不同的服务器,在vue开发中，你可能经常看到process.env这个东西，那process到底是什么呢？
在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西（在webpack中打印一下这个process，在输出结果中可以看到）。NODE_ENV是用户一个自定义的变量（当然也可以是其他的变量名，只是大家一般都取NODE_ENV作为变量名）在webpack中它的用途是判断生产环境或开发环境的依据的。

在webpack中获取环境变量：

1、在package.json中设置

"scripts": {
    "build": "cross-env NODE_ENV=prod webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=dev webpack-dev-server"
}

当你运行npm run build cross-env NODE_ENV=prod 这个就是设置环境变量NODE_ENV为prod，cross-env是运行跨平台设置和使用环境变量的脚本，需要安装。这样在webpack中，打印一下process.env.NODE_ENV:

console.log(process.env.NODE_ENV)  //prod

当然运行npm run dev时这个值就是dev了。
2、在webpack中直接设置：
像这样process.env.NODE_ENV = 'prod',或者为了区分不同的环境，将NODE_ENV放到一个单独的文件里引入使用（vue-cli就是这么做的）。
prod.env.js

'use strict'

module.exports = {
  NODE_ENV: '"prod"'
}

dev.env.js

'use strict'

module.exports = {
  NODE_ENV: '"dev"'
}

或者在来个测试环境：

test.env.js

'use strict'

module.exports = {
  NODE_ENV: '"test"'
}

webpack.config.js:

const envconfig = require('./dev.env')

process.env.NODE_ENV = envconfig .NODE_ENV
console.log(process.env.NODE_ENV)  //dev

好了，拿vue开发来说，我们在main.js中打印一下环境变量：

console.log(process.env.NODE_ENV)  //undefined

结果是undefined，为什么webpack.config.js中有值，到了这里却是undefined了呢？这是因为vue是运行在浏览器端端，而process是node环境端，所以可以在基于node的打包编译的过程是可以使用process,而不能在vue里单独使用。
那么问题来了，我在向后端发请求时不同的环境请求的服务器不同我改怎么取环境变量来区分呢？
用webpack的DefinePlugin就可以了。

DefinePlugin是什么

官方文档这样说： DefinePlugin允许我们创建全局变量，可以在编译时进行设置，因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境或者其他环境。
拿vue-cli里的配置来说：

const env = require('./prod.env')

plugins: [
    ...
    new webpack.DefinePlugin({
      'process.env': env
    })
]

env就是一个对象，你可以在这个对象里定义一些键值对作为全局变量，像上面写过的.env.js文件里那样。这样在vue开发中main.js（或者其他js、.vue文件中）可以通过process.env.NODE_ENV来取值了。在像后台发请求时不同的服务器就可以.env.js文件中配置一下就好了：
prod.env.js

'use strict'

module.exports = {
  NODE_ENV: '"prod"',
  BASE_API:'"https://www.xxxx.com"'
}

vue开发中，process.env.BASE_API就可以根据不同的环境取到不同的值了。