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;

以上是我个人在项目中的应用，如有错误的地方还请大家帮我指出，不胜感激