vue項(xiàng)目怎么配置env

本篇內(nèi)容介紹了“vue項(xiàng)目怎么配置env”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

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 是開發(fā)環(huán)境下的配置文件，僅在開發(fā)環(huán)境加載。

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

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

配置.env文件

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

配置啟動(dòng)命令

在vue項(xiàng)目根目錄下，找到package.json文件，其中scripts對象是配置的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"
  }

每一行說明如下：

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，測試環(huán)境打包，其中.env和.env.test文件會(huì)加載

5，npm run all，生產(chǎn)環(huán)境和測試環(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è)人覺得最大的用處就是不同環(huán)境加載不同的變量，比如開發(fā)環(huán)境和測試、正式環(huán)境的請求域名不同，直接在.env文件中定義一個(gè)全局的URL，在請求封裝中使用，很方便。

“vue項(xiàng)目怎么配置env”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！