vue項目使用.env文件配置全局環境變量

關於文件名：必須以以下方式命名，不要亂起名，也無需專門手動控制加載哪一個文件

.env 全局默認配置文件，不論什麼環境都會加載合併

.env.development 開發環境下的配置文件

.env.production 生產環境下的配置文件

 

 

 

關於文件內容：

注意：屬性名必須以"VUE_APP_"開頭，好比VUE_APP_XXX

.env：

 

 

 .env.development：

關於文件的加載：

根據啓動命令vue會自動加載對應的環境，vue是根據文件名進行加載的，因此上面說「不要亂起名，也無需專門控制加載哪一個文件」

好比執行npm run serve命令，會自動加載.env.development文件

啓動項目：npm run serve

再App.vue文件中添加下面測試代碼打印一下process.env：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script> console.log(process.env) </script>

 

 

 

 

可見NODE_ENV被改成了development，覆蓋掉了.env中的全局屬性

.env中的全局屬性NODE_ENV、VUE_APP_URL被覆蓋，

.env中的全局屬性VUE_APP_PREVIEW、VUE_APP_DEFAULT_PARAM被保留