vue中利用.env文件存儲全局環(huán)境變量，以及配置vue啟動和打包命令

作用：在vue項(xiàng)目中，env是全局配置文件，可以存儲不同環(huán)境下的變量。使用vue-cli搭建項(xiàng)目，默認(rèn)會在根目錄創(chuàng)建一個.env文件，如果需要更多類型的.env文件，需要自行創(chuàng)建。

其中：

1，.env 后綴的文件是全局默認(rèn)配置文件，不論什么環(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)部測試版，等等...

配置.env文件

變量命名必須以VUE_APP_開頭，比如VUE_APP_URL，VUE_APP_PWD

配置啟動命令

在vue項(xiàng)目根目錄下，找到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，啟動項(xiàng)目，并且加載.env和.env.development文件

2，npm run serve-test，啟動項(xiàng)目，并且加載.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文件

獲取.env中的全局變量

比如，我在.env文件中設(shè)置了變量VUE_APP_BASE_URL = 'https://www.baidu.com'，在項(xiàng)目中我想獲取，只需要使用process.env.VUE_APP_BASE_URL，就可以取到。

實(shí)際用處

個人覺得最大的用處就是不同環(huán)境加載不同的變量，比如開發(fā)環(huán)境和測試、正式環(huán)境的請求域名不同，直接在.env文件中定義一個全局的URL，在請求封裝中使用，很方便。

總結(jié)

到此這篇關(guān)于vue項(xiàng)目配置env的文章就介紹到這了,更多相關(guān)vue項(xiàng)目配置env內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論