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.采用配置文件

在项目根目录创建config文件夹，然后创建2个文件

pro.env.js:

module.exports = {

NODE_ENV: '"production"', // 生产环境
API_ROOT: '"http://192.168.2.2:6000"' // 填上自己的接口的网址    

} dev.env.js:

module.exports = {

NODE_ENV: '"development"', // 开发环境
API_ROOT: '"http://192.168.1.1:5000"' // 填上自己的接口的网址

}

request.js引入，如图：

import dev from '../config/dev.env.js'

import pro from '../config/pro.env.js'

const NODE_ENV = process.env.NODE_ENV;

let target = '';

if (NODE_ENV === 'production') {

axios.defaults.baseURL = pro.API_ROOT;

} else {

axios.defaults.baseURL = dev.API_ROOT;

}