axios设置多个baseurl(axios.defaults.baseURL的三种配置方法)
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的三种配置方法是一个非常常见的需求 。
需求:
设计思路
实现思路分析
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
欢迎阅读 ,各位老铁 ,如果对你有帮助 ,点个赞加个关注呗!~
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!