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

  • 目录
    • 概述
      • 需求:
    • 设计思路
    • 实现思路分析
      • 1.少
      • 2.2.动态获取请求地址
      • 3.3.采用配置文件
  • 参考资料和推荐阅读

Survive by day and develop by night.
talk for import biz , show your perfect code,full busy,skip hardness,make a better result,wait for change,challenge Survive.
happy for hardess to solve denpendies.

目录

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

概述

axios.defaults.baseURL的三种配置方法是一个非常常见的需求。

需求:

设计思路

实现思路分析

1.少

在只需要配置单个或有限明确的接口域名时可以直接设置,在生产环境和开发环境切换时需手动更改

axios.defaults.baseURL=“http://192.168.1.1:5000”;

2.2.动态获取请求地址

在线上地址不明确或者不想手动更改地址的时候可设置自动获取当前的域名进行请求

//协议
let protocol = window.Location.protocol;
//主机
let host = window.Location.host;
if(reg.test(host)){
//若本地项目调试使用
axios.defaults.baseURL = 'http://192.168.1.1:5000';	
复制代码
}else
//动态请求地址            协议               主机	    
axios.defaults.baseURL = protocol + "//" + host + ":5000";	
复制代码
}

3.3.采用配置文件

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

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”’ // 填上自己的接口的网址

}
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;

}

const service = axios.create({
baseURL: ‘/sc’, // api base_url
timeout: 30000 // 请求超时时间
})

参考资料和推荐阅读

[1]. https://juejin.cn/post/7025884065081360415

欢迎阅读,各位老铁,如果对你有帮助,点个赞加个关注呗!~

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。