在vue項目中供汛,env是全局配置文件纸镊,可以存儲不同環(huán)境下的變量被去。
使用vue-cli搭建項目,默認會在根目錄創(chuàng)建一個.env文件
如果需要更多類型的.env文件仇箱,需要自行創(chuàng)建
.env 后綴的文件是全局默認配置文件县恕,不論什么環(huán)境都會加載并合并
.env.development 是開發(fā)環(huán)境下的配置文件,僅在開發(fā)環(huán)境加載剂桥。
.env.production 是生產(chǎn)環(huán)境下的配置文件(也就是正式環(huán)境)忠烛,僅在生產(chǎn)環(huán)境加載
以上三個文件命名不能變
我們?nèi)绻胱远x可以創(chuàng)建其他命名的文件 比如.env.test
文件中的變量命名必須以VUE_APP_開頭
比如VUE_APP_URL,VUE_APP_API
配置啟動命令
在vue項目根目錄下渊额,找到package.json文件况木,其中scripts對象是配置的vue啟動命令
比如npm run dev,配置如下:
{
"name": "hxqgov",
"version": "0.1.0", // 版本號
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"build:test": "vue-cli-service build --mode test",
"build:prod": "vue-cli-service build",
"build:fengtai": "vue-cli-service build --mode fengtai",
"build:sit": "vue-cli-service build --mode staging",
"build:gs": "vue-cli-service build --mode ganshu",
"build:nation": "vue-cli-service build --mode nation",
"build:govnation": "vue-cli-service build --mode nationprod",
"build:xjsit": "vue-cli-service build --mode xjsit",
"build:xjprod": "vue-cli-service build --mode xjprod",
"build:bjdc": "vue-cli-service build --mode bjdc",
"build:bjdcprod": "vue-cli-service build --mode bjdcprod",
"build:bjcy": "vue-cli-service build --mode bjcy",
"build:bjcyprod": "vue-cli-service build --mode bjcyprod",
"build:tzdc": "vue-cli-service build --mode tzdc",
"build:zhejiang": "vue-cli-service build --mode zhejiang"
},
"dependencies": {
"@easydarwin/easyplayer": "^5.0.3"
}
}
1.npm run serve旬迹,啟動項目火惊,并且加載.env和.env.development文件
2.npm run build:test,測試環(huán)境打包奔垦,其中.env和.env.test文件會加載
3.npm run build:prod屹耐,生產(chǎn)環(huán)境打包,其中.env和.env.production文件會加載
獲取.env中的全局變量
比如,我在.env文件中設置了變量VUE_APP_BASE_URL = 'http://www.reibang.com'惶岭,在項目中我想獲取寿弱,只需要使用process.env.VUE_APP_BASE_URL,就可以取到按灶。
實際用處
個人覺得最大的用處就是不同環(huán)境加載不同的變量症革,比如開發(fā)環(huán)境和測試、正式環(huán)境的請求域名不同鸯旁,直接在.env文件中定義一個全局的URL噪矛,在請求封裝中使用,很方便铺罢。