1，前言
分享一下vue項目中利用.env文件存儲全局環境變量，以及利于項目開發的vue啟動以及打包命令。
2，.env文件的作用
在vue項目中，env是全局配置文件，可以存儲不同環境下的變量。使用vue-cli搭建項目，默認會在根目錄創建一個.env文件，如果需要更多類型的.env文件，需要自行創建。
其中：
1，.env 后綴的文件是全局默認配置文件，不論什么環境都會加載并合并。
2，.env.development 是開發環境下的配置文件，僅在開發環境加載。
3，.env.production 是生產環境下的配置文件（也就是正式環境），僅在生產環境加載。
以上三個命名不能變動，除此之外，可以另外自定義加上.env.test文件，也就是測試環境，或者.env.bata，也就是內部測試版，等等...
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，生產環境打包，其中.env和.env.production文件會加載
4，npm run test，測試環境打包，其中.env和.env.test文件會加載
5，npm run all，生產環境和測試環境同時打包，加載不同的.env文件
5，獲取.env中的全局變量
比如，我在.env文件中設置了變量VUE_APP_BASE_URL = 'https://www.baidu.com'，在項目中我想獲取，只需要使用process.env.VUE_APP_BASE_URL，就可以取到。
5，實際用處
個人覺得最大的用處就是不同環境加載不同的變量，比如開發環境和測試、正式環境的請求域名不同，直接在.env文件中定義一個全局的URL，在請求封裝中使用，很方便。
如果看了覺得有幫助的，我是@鵬多多11997110103，歡迎 點贊 關注 評論；
END
往期文章
個人主頁
