在開發(fā)時可能會碰到多環(huán)境的情況，比如在開發(fā)時有一個開發(fā)服務(wù)器：http://localhost:8000籍凝，在上線的時候又會有一個正式環(huán)境的服務(wù)器：http:www.xxx.com,我們需要判斷不同的環(huán)境來選擇不同的服務(wù)器,在vue開發(fā)中路媚，你可能經(jīng)郴魄恚看到process.env這個東西，那process到底是什么呢？
在node中脏款，有全局變量process表示的是當(dāng)前的node進(jìn)程围苫。process.env包含著關(guān)于系統(tǒng)環(huán)境的信息。但是process.env中并不存在NODE_ENV這個東西（在webpack中打印一下這個process撤师，在輸出結(jié)果中可以看到）剂府。NODE_ENV是用戶一個自定義的變量（當(dāng)然也可以是其他的變量名，只是大家一般都取NODE_ENV作為變量名）在webpack中它的用途是判斷生產(chǎn)環(huán)境或開發(fā)環(huán)境的依據(jù)的剃盾。
在webpack中獲取環(huán)境變量：
1腺占、在package.json中設(shè)置
"scripts": {
"build": "cross-env NODE_ENV=prod webpack --config webpack.config.js",
"dev": "cross-env NODE_ENV=dev webpack-dev-server"
}
當(dāng)你運行npm run build cross-env NODE_ENV=prod 這個就是設(shè)置環(huán)境變量NODE_ENV為prod，cross-env是運行跨平臺設(shè)置和使用環(huán)境變量的腳本痒谴，需要安裝衰伯。這樣在webpack中，打印一下process.env.NODE_ENV:
console.log(process.env.NODE_ENV) //prod
當(dāng)然運行npm run dev時這個值就是dev了积蔚。
2意鲸、在webpack中直接設(shè)置：
像這樣process.env.NODE_ENV = 'prod',或者為了區(qū)分不同的環(huán)境尽爆，將NODE_ENV放到一個單獨的文件里引入使用（vue-cli就是這么做的）怎顾。
prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"prod"'
}
dev.env.js
'use strict'
module.exports = {
NODE_ENV: '"dev"'
}
或者在來個測試環(huán)境：
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開發(fā)來說教翩，我們在main.js中打印一下環(huán)境變量：
console.log(process.env.NODE_ENV) //undefined
結(jié)果是undefined饱亿，為什么webpack.config.js中有值彪笼，到了這里卻是undefined了呢配猫？這是因為vue是運行在瀏覽器端端，而process是node環(huán)境端淑翼，所以可以在基于node的打包編譯的過程是可以使用process,而不能在vue里單獨使用腐巢。
那么問題來了，我在向后端發(fā)請求時不同的環(huán)境請求的服務(wù)器不同我改怎么取環(huán)境變量來區(qū)分呢玄括？
用webpack的DefinePlugin就可以了冯丙。
DefinePlugin是什么
官方文檔這樣說： DefinePlugin允許我們創(chuàng)建全局變量，可以在編譯時進(jìn)行設(shè)置遭京，因此我們可以使用該屬性來設(shè)置全局變量來區(qū)分開發(fā)環(huán)境和正式環(huán)境或者其他環(huán)境胃惜。
拿vue-cli里的配置來說：
const env = require('./prod.env')
plugins: [
...
new webpack.DefinePlugin({
'process.env': env
})
]
env就是一個對象泞莉，你可以在這個對象里定義一些鍵值對作為全局變量，像上面寫過的.env.js文件里那樣船殉。這樣在vue開發(fā)中main.js（或者其他js鲫趁、.vue文件中）可以通過process.env.NODE_ENV來取值了。在像后臺發(fā)請求時不同的服務(wù)器就可以.env.js文件中配置一下就好了：
prod.env.js
'use strict'
module.exports = {
NODE_ENV: '"prod"',
BASE_API:'"https://www.xxxx.com"'
}
vue開發(fā)中捺弦，process.env.BASE_API就可以根據(jù)不同的環(huán)境取到不同的值了饮寞。
