一看就懂的vue環(huán)境變量配置
這是基于cli3.x版本的環(huán)境變量配置指南。沒有過多復(fù)雜的介紹骄酗，只有極簡的實用配置稀余。旨在給需要的朋友提供幫助以及自己溫故知新，真正一看就會懂趋翻，懂了就能用睛琳。
配置環(huán)境變量的目的
項目開發(fā)過程中，至少會經(jīng)歷開發(fā)環(huán)境踏烙、測試環(huán)境和生產(chǎn)環(huán)境(即正式環(huán)境)三個階段师骗。不同階段請求的狀態(tài)(如接口地址等)不盡相同，若手動切換接口地址是相當(dāng)繁瑣且易出錯的讨惩。于是環(huán)境變量配置的需求就應(yīng)運而生辟癌，我們只需做簡單的配置，把環(huán)境狀態(tài)切換的工作交給代碼荐捻。
配置步驟
1. 首先在項目根目錄下(與package.json同級)新建三個".env"文件
如上黍少，三個".env"文件后綴名為development、production靴患、test仍侥，分別對應(yīng)為開發(fā)環(huán)境要出、生產(chǎn)環(huán)境和測試環(huán)境
.env.development
.env.production
.env.test
2. 配置package.json文件
在 vue-cli-service 命令后加上對應(yīng)".env"文件名字鸳君。配置完成后，當(dāng)我們運行npm run xxx命令時會執(zhí)行對應(yīng)的".env"文件患蹂。從而實現(xiàn)環(huán)境變量配置功能或颊。
3. 使用配置的環(huán)境變量
配置vue.config.js文件
在根目錄下新建 “vue.config.js” 文件砸紊，并打印process.env.VUE_APP_SERVER_URL的內(nèi)容，然后運行npm run serve命令囱挑∽硗纾可以看到命令行在執(zhí)行“vue-cli-service serve”的同時加上了“--mode development”，緊接著輸出了“.env.development”文件內(nèi)的接口地址————“http://development”平挑。說明此時我們的環(huán)境變量已經(jīng)配置成功了游添！
接下來運行npm run build命令
我們發(fā)現(xiàn)命令行執(zhí)行了“vue-cli-serve build”的同時加上了“--mode production”，并且輸出的接口地址也對應(yīng)更改了通熄。再看左側(cè)目錄下新增了一個打包后的文件夾唆涝。再次說明我們的環(huán)境變量已經(jīng)配置成功了！
最后再極其不愿的執(zhí)行npm run test命令
吶唇辨，同樣做了對應(yīng)的輸出與更改廊酣。至此，我們的vue環(huán)境變量配置圓滿成功赏枚！
需要注意亡驰，在使用的時候記得調(diào)用process.env變量哦
順便一提，在生產(chǎn)環(huán)境下記得設(shè)置productionSourceMap值為false饿幅，以減少打包后的項目體積(大概能減少百分之六七十左右)凡辱，這只是vue項目優(yōu)化的一個點，此處不做過多講解栗恩，有關(guān)項目優(yōu)化內(nèi)容下次再單獨寫一篇文章煞茫。
2.x
varroot = process.env.NODE_ENV=='production'?'生產(chǎn)':'開發(fā)'
".env"文件命名不一定非要development、production摄凡、test续徽。是可以自定義的，前提是得在package.json里面做對應(yīng)的名稱修改亲澡！(注意命名要語義化方便理解)
詳情參照?https://cli.vuejs.org/zh/guide/mode-and-env.html
轉(zhuǎn)載自?螞蟻上的大象??https://blog.csdn.net/Jensen_Yao/article/details/101702835
