在實際項目開發中,經常會碰到需要判斷環境變量的情景。
在 vue-cli 的環境下,已經默認配置了一個NODE_ENV的環境變量。當 npm run dev
時,環境變量是development ;當 npm run build
時,環境變量是production。
用過vue-cli開發的通常對NODE_ENV都不陌生,比如我們配置ajax請求的域名頭時,就是通過判斷 process.env.NODE_ENV來實現的。
上面的process.env.NODE_ENV是vue-cli默認配置的,但是在實際項目開發中,只有開發環境和生產環境是還不夠。比如我們還想來一個測試壞境,這時候就需要自己定義了
vue-cli baseURL配置
.env.development配置文件
VUE_APP_BASEURL提取了所有請求url的公共部分,這樣在發送axios請求時就不需要寫完整的請求路徑,只需要寫調用後端的接口名就行了,
要想讓vue知道這個baseURL,需要進行配置,將配置的baseURL交給vue
向後臺發送請求
要想和後臺進行數據交互,發送請求時就要解決跨域問題,即要保證瀏覽器地址欄和發送請求的url一致
瀏覽器地址欄:
請求url:
若IP地址和端口號不同,就會發生跨域問題,無法請求到後臺。
跨域錯誤:
配置代理
vue.config,js中可以對前端項目的端口進行配置,並且可以將請求轉發到真正要請求的地方去