vue中利用.env文件存儲全局環境變量,以及配置vue啟動和打包命令


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_URLVUE_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,在請求封裝中使用,很方便。

如果看了覺得有幫助的,我是@鵬多多,歡迎 點贊 關注 評論;
END

面向百度編程

往期文章

個人主頁


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM