在vue的項(xiàng)目開發(fā)中，往往代碼要在本地開發(fā)環(huán)境、測(cè)試環(huán)境、預(yù)發(fā)環(huán)境、生產(chǎn)環(huán)境等各種環(huán)境下執(zhí)行，各個(gè)環(huán)境所對(duì)應(yīng)的api接口地址也是不同的，如果每次打包都手動(dòng)的修改接口地址，是很低效的，也是很容易出錯(cuò)的，如果在打包的時(shí)候忘記修改接口地址，后果也是很嚴(yán)重的。

寫一個(gè)配置文件，可以根據(jù)環(huán)境的不同，自動(dòng)切換接口地址是很有必要的。

在號(hào)稱零配置的vue-cli3中，該如何配置呢？

在vue-cli3的項(xiàng)目中，
npm run serve時(shí)會(huì)把process.env.NODE_ENV設(shè)置為‘development’；
npm run build 時(shí)會(huì)把process.env.NODE_ENV設(shè)置為‘production’；

根據(jù)process.env.NODE_ENV設(shè)置不同請(qǐng)求url就可以區(qū)分出本地和線上環(huán)境。

但是，凡事最怕但是，但是實(shí)際開發(fā)過程中涉及到的環(huán)境可能不止這兩種，還可能會(huì)有測(cè)試環(huán)境，預(yù)發(fā)環(huán)境和生產(chǎn)環(huán)境等等。

同樣是執(zhí)行npm run build，怎么手動(dòng)更改process.env.NODE_ENV？

具體步驟如下： (以預(yù)發(fā)環(huán)境為例)

• ** package.json**的scripts中添加 "pre": "vue-cli-service build --mode pre"

• 在項(xiàng)目根目錄添加文件“.env.pre”，其內(nèi)容：NODE_ENV = 'pre'
  是的，只寫這一句就行了！

(命令中用到的mode，文章最后會(huì)講到)
這樣，npm run pre即打預(yù)發(fā)環(huán)境包，npm run build則打生產(chǎn)包

這主要得益于在 vue-cli 3.0.x 里面支持 “.env” 文件配置

通過改變process.env.NODE_ENV值區(qū)分打包環(huán)境，但是webpack打包時(shí)針對(duì)process.env.NODE_ENV===‘production’和其他情況打出來的包結(jié)構(gòu)和大小都不一樣；

怎么消除這種差異？
思路：原來是根據(jù)process.env.NODE_ENV的值來區(qū)分，能不能換個(gè)值作區(qū)分？
可以使用其他變量比如process.env.VUE_APP_TITLE來區(qū)分環(huán)境

與上面不同的是，.env.pre文件中的內(nèi)容做一下修改：

NODE_ENV = 'production' 
VUE_APP_TITLE = 'pre'

注意：NODE_ENV改成了production，將VUE_APP_TITLE的值置為了pre（只有VUE_APP_開頭的環(huán)境變量可以在項(xiàng)目代碼中直接使用）

只有以 VUE_APP_ 開頭的變量會(huì)被 webpack.DefinePlugin 靜態(tài)嵌入到客戶端側(cè)的包中(即在項(xiàng)目代碼中使用)。你可以在應(yīng)用的代碼中這樣訪問它們：

模式概念:
模式是 Vue CLI 項(xiàng)目中一個(gè)重要的概念。一般情況下 Vue CLI 項(xiàng)目有三個(gè)默認(rèn)模式：
development 模式用于 vue-cli-service serve
production 模式用于 vue-cli-service build 和 vue-cli-service test:e2e
test 模式用于 vue-cli-service test:unit
模式不等同于 NODE_ENV，一個(gè)模式可以包含多個(gè)環(huán)境變量。也就是說，每個(gè)模式都將 NODE_ENV的值設(shè)置為模式的名稱(可重新賦值更改)——比如在 development 模式下 NODE_ENV 的值會(huì)被設(shè)置為 “development”。

你可以通過為 .env 文件增加后綴來設(shè)置某個(gè)模式下特有的環(huán)境變量。比如，如果你在項(xiàng)目根目錄創(chuàng)建一個(gè)名為 .env.development 的文件，那么在這個(gè)文件里聲明過的變量就只會(huì)在 development 模式下被載入。

你可以通過傳遞 --mode 選項(xiàng)參數(shù)為命令行覆寫默認(rèn)的模式。例如，如果你想要在構(gòu)建命令中使用開發(fā)環(huán)境變量，請(qǐng)?jiān)谀愕?package.json 腳本中加入：

"dev-build": "vue-cli-service build --mode development",

在項(xiàng)目根路徑創(chuàng)建.env.test文件，內(nèi)容為

NODE_ENV='production' //表明這是生產(chǎn)環(huán)境(需要打包)
VUE_APP_CURRENTMODE='test' // 表明生產(chǎn)環(huán)境模式信息
VUE_APP_BASEURL='http://***.****.com:8000' // 測(cè)試服務(wù)器地址

修改項(xiàng)目中的api接口文件
在我的項(xiàng)目中,一般會(huì)創(chuàng)建一個(gè)api.js 來管理所有的接口url
因?yàn)槲覀冊(cè)诒镜亻_發(fā)環(huán)境中是通過代理來連接服務(wù)器的,所以將url寫成這

在文件開頭通過環(huán)境變量改變baseUrl

let baseUrl = '';
if (process.env.NODE_ENV == 'development') {
baseUrl = ""
} else if (process.env.NODE_ENV == 'production') {
baseUrl = process.env.VUE_APP_BASEURL
} else {
baseUrl = ""
}