在vue的項(xiàng)目開發(fā)中历筝，往往代碼要在本地開發(fā)環(huán)境友鼻、測試環(huán)境傻昙、預(yù)發(fā)環(huán)境闺骚、生產(chǎn)環(huán)境等各種環(huán)境下執(zhí)行，各個(gè)環(huán)境所對應(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è)置不同請求url就可以區(qū)分出本地和線上環(huán)境。
但是贺嫂，凡事最怕但是滓鸠，但是實(shí)際開發(fā)過程中涉及到的環(huán)境可能不止這兩種，還可能會(huì)有測試環(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í)針對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)境變量，請?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' // 測試服務(wù)器地址
修改項(xiàng)目中的api接口文件
在我的項(xiàng)目中,一般會(huì)創(chuàng)建一個(gè)api.js 來管理所有的接口url
因?yàn)槲覀冊诒镜亻_發(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 = ""
}
