Vue項目如何區分開發還是生產環境切分不同環境接口 （環境識別）

1.為什么要配置不同的接口地址
目前，由於我在開發過程中，前端請求訪問的是我本機啟動的后台服務，此時涉及到跨域（因為端口不一樣），所以就在config/index.js文件中配置了代理，如下：

意思就是說凡是以api開頭的請求，會幫我轉到8089端口去獲取數據。所以前端的請求都統一寫成'api'+'接口名'

但是在生產環境下，我們不需要在接口前面加api發送請求，所以我們需要判斷開發環境和生產環境，然后寫相應接口。

2.具體配置
在項目中找到以下兩個文件：

config/dev.env.js  和  config/prod.env.js

2.1  在config/dev.env.js文件中加入一行代碼：API_ROOT: ' "//localhost:8080/api" '
       

2.2  在config/prod.env.js文件中加入一行代碼： API_ROOT: ' "" '
       

3.在src/main.js文件中配置全局變量（掛在vue原型上）
    process.env是一個全局變量，能夠判斷當前環境。

    所以在axios請求的時候，可以直接用this.baseURL+api :

.env 默認全局配置文件
.env.development 開發環境配置文件
.env.production 生產環境配置文件
 
文件名為Vue的約定，不可隨意更改
 
配置環境變量格式
 
VUE_APP_{自定義環境變量名} = {值}
 
其中“VUE_APP_”是規定的環境變量名前綴，如果變量名不是以此開頭，則在程序中不能調用此環境變量
 
 
例如在.env文件中寫入：
VUE_APP_UserNumber = 12345
VUE_APP_UserString = "ABCDE"
XJL = "XJL"
process是nodeJs的全局變量，其中包含了env的屬性，Vue項目啟動時會自動讀取.env文件中的環境變量

 
即可在Vue.js中可如此調用:
console.log(process.env.VUE_APP_UserNumber);
console.log(process.env.VUE_APP_UserString);
console.log(process.env.XJL);
 

運行后，console輸出:

12345
ABCDE
undefined
Vue 源碼會根據 process.env.NODE_ENV 決定是否啟用生產環境模式，默認情況為開發環境模式。在 webpack 與 Browserify 中都有方法來覆蓋此變量，以啟用 Vue 的生產環境模式，同時在構建過程中警告語句也會被壓縮工具去除。

 
如果是開發模式，Vue會自動讀取.env和.env.development兩個文件，.env.development文件內定義的環境變量會覆蓋.env文件內同名的環境變量;如果是生產環境則是.env.production 文件內定義的環境變量會覆蓋.env文件內同名的環境變量.
 
例如：
.env文件內容
VUE_APP_UserNumber = 12345
VUE_APP_UserString = "ABCDE"
VUE_APP_From = ".env"
 

.env.development文件內容

VUE_APP_From = ".env.development"
 

.env.production文件內容

VUE_APP_From = ".env.production"
 

在Vue.js中可如此調用:

console.log(process.env.VUE_APP_UserNumber);
console.log(process.env.VUE_APP_UserString);
console.log(process.env.From);
 

開發模式下輸出：

12345
ABCDE
.env.development
 

生產模式下輸出:

12345
ABCDE
.env.production