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

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

其中：

1，.env 后綴的文件是全局默認(rèn)配置文件，不論什么環(huán)境都會(huì)加載并合并。

2，.env.development 是開(kāi)發(fā)環(huán)境下的配置文件，僅在開(kāi)發(fā)環(huán)境加載。

3，.env.production 是生產(chǎn)環(huán)境下的配置文件（也就是正式環(huán)境），僅在生產(chǎn)環(huán)境加載。

以上三個(gè)命名不能變動(dòng)，除此之外，可以另外自定義加上.env.test文件，也就是測(cè)試環(huán)境，或者.env.bata，也就是內(nèi)部測(cè)試版，等等...

配置.env文件

變量命名必須以VUE_APP_開(kāi)頭，比如VUE_APP_URL，VUE_APP_PWD

配置啟動(dòng)命令

在vue項(xiàng)目根目錄下，找到package.json文件，其中scripts對(duì)象是配置的vue啟動(dòng)命令，比如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"
  }

每一行說(shuō)明如下：

1，npm run serve，啟動(dòng)項(xiàng)目，并且加載.env和.env.development文件

2，npm run serve-test，啟動(dòng)項(xiàng)目，并且加載.env和.env.test文件

3，npm run build，生產(chǎn)環(huán)境打包，其中.env和.env.production文件會(huì)加載

4，npm run test，測(cè)試環(huán)境打包，其中.env和.env.test文件會(huì)加載

5，npm run all，生產(chǎn)環(huán)境和測(cè)試環(huán)境同時(shí)打包，加載不同的.env文件

獲取.env中的全局變量

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

實(shí)際用處

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

總結(jié)

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

最新評(píng)論