axios.defaults.baseURL的三種配置方法

簡介

本文介紹我在項目中使用axios切換生產環境和開發環境接口地址的三種配置

1.常規設置

在只需要配置單個或有限明確的接口域名時可以直接設置，在生產環境和開發環境切換時需手動更改

   axios.defaults.baseURL="http://192.168.1.1:5000"; 

2.動態獲取請求地址

在線上地址不明確或者不想手動更改地址的時候可設置自動獲取當前的域名進行請求，不好的地方在於跨域的話端口是寫死的

   let protocol = window.location.protocol; //協議 let host = window.location.host; //主機 let reg = /^localhost+/; if(reg.test(host)) { //若本地項目調試使用 axios.defaults.baseURL = 'http://192.168.1.1:5000'; } else { //動態請求地址 協議 主機 axios.defaults.baseURL = protocol + "//" + host +":5000"; }

3.采用配置文件

應用於有多個不明確的部署環境，可在不重新打包的情況下更改接口地址，如下設置后只需在dist里面static下找到config.js更改值即可實現更換接口地址
3.1 先新建一個配置文件，在static文件夾下鍵一個config.js(方便記憶，參數名可自行更改)

   window.gurl={ AXIOS_TIMEOUT:10000, SERVICE_CONTEXT_PATH:'http://192.168.1.1:5000' }

3.2 在index.html里面引入config.js

   <script src="./static/config.js" type="text/javascript"></script> 

3.3 main.js

	axios.defaults.baseURL = window.gurl.SERVICE_CONTEXT_PATH;