1骤竹，前言
分享一下vue項目中利用.env文件存儲全局環(huán)境變量帝牡，以及利于項目開發(fā)的vue啟動以及打包命令。
2蒙揣，.env文件的作用
在vue項目中靶溜，env是全局配置文件，可以存儲不同環(huán)境下的變量鸣奔。使用vue-cli搭建項目墨技，默認會在根目錄創(chuàng)建一個.env文件，如果需要更多類型的.env文件挎狸，需要自行創(chuàng)建扣汪。
其中：
1，.env 后綴的文件是全局默認配置文件锨匆，不論什么環(huán)境都會加載并合并崭别。
2，.env.development 是開發(fā)環(huán)境下的配置文件恐锣，僅在開發(fā)環(huán)境加載茅主。
3，.env.production 是生產(chǎn)環(huán)境下的配置文件（也就是正式環(huán)境）土榴，僅在生產(chǎn)環(huán)境加載诀姚。
以上三個命名不能變動，除此之外玷禽，可以另外自定義加上.env.test文件赫段，也就是測試環(huán)境，或者.env.bata矢赁，也就是內(nèi)部測試版糯笙，等等...
3，配置.env文件
變量命名必須以VUE_APP_開頭撩银，比如VUE_APP_URL给涕，VUE_APP_PWD
4，配置啟動命令
在vue項目根目錄下，找到package.json文件够庙，其中scripts對象是配置的vue啟動命令恭应，比如npm run dev，配置如下：
"scripts": {
"serve": "vue-cli-service serve",
"serve-test": "vue-cli-service serve --mode test",
"build": "vue-cli-service build",
"test": "vue-cli-service build --mode test",
"all": "vue-cli-service build && vue-cli-service build --mode test"
}
每一行說明如下：
1耘眨，npm run serve暮屡，啟動項目，并且加載.env和.env.development文件
2毅桃，npm run serve-test，啟動項目准夷，并且加載.env和.env.test文件
3钥飞，npm run build，生產(chǎn)環(huán)境打包衫嵌，其中.env和.env.production文件會加載
4读宙，npm run test，測試環(huán)境打包楔绞，其中.env和.env.test文件會加載
5结闸，npm run all，生產(chǎn)環(huán)境和測試環(huán)境同時打包酒朵，加載不同的.env文件
5桦锄，獲取.env中的全局變量
比如，我在.env文件中設置了變量VUE_APP_BASE_URL = 'https://www.baidu.com'蔫耽，在項目中我想獲取结耀，只需要使用process.env.VUE_APP_BASE_URL，就可以取到匙铡。
5图甜，實際用處
個人覺得最大的用處就是不同環(huán)境加載不同的變量，比如開發(fā)環(huán)境和測試鳖眼、正式環(huán)境的請求域名不同黑毅，直接在.env文件中定義一個全局的URL，在請求封裝中使用钦讳，很方便矿瘦。
如果看了覺得有幫助的，我是@鵬多多11997110103蜂厅，歡迎 點贊 關注 評論匪凡；
END
往期文章
個人主頁
