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

news/2024/5/18 15:04:53/文章来源:https://blog.csdn.net/xiamaocheng/article/details/128157529

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的三种配置方法是一个非常常见的需求。

需求:

设计思路

实现思路分析

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_229604.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Spring学习:二、Bean的管理

4. Bean的管理 ​ Spring的基本Bean管理包括Bean配置,Bean实例化和Bean的依赖注入。这些管理可以通过手工编码的方式把每个Bean注册到容器中,也可以通过properties文件和xml文件配置Bean和Bean之间的依赖关系。通常我们的配置方式是XML作为配置文件。 …

DNS查询流程

👨‍💻个人主页: 才疏学浅的木子 🙇‍♂️ 本人也在学习阶段如若发现问题,请告知非常感谢 🙇‍♂️ 📒 本文来自专栏: 计算机网络 ❤️ 支持我:👍点赞 &#…

李宏毅《DLHLP》学习笔记6 - 语言模型

视频链接:https://www.youtube.com/watch?vdymfkWtVUdo&listPLJV_el3uVTsO07RpBYFsXg-bN5Lu0nhdG&index8&ab_channelHung-yiLee 课件链接:https://speech.ee.ntu.edu.tw/~tlkagk/courses/DLHLP20/ASR3.pdf 1. Language Model LM的作用是预…

FFmpeg二次开发

本文主要讲解 FFmpeg 的二次开发,ffmpeg.exe 的命令行功能特别强大,很多需求都能直接用命令行实现,但是总有一些需求用 命令行实现不太好做。 而你实现那些特殊需求,通常需要把 ffmpeg.exe 里面的某部分代码抄过来,本…

阿里云新用户活动:云服务器ECS 新购、升级报价出炉了!

阿里云新人特惠,阿里云新用户新购升级立享满减,新购升级云服务器ECS ,购买热门产品 s6/u1/c6/g6/r6/c7/g7/r7指定配置,可享折上折!从未购买过云服务器ECS或者轻量应用服务器的用户一次性可领取3张优惠券。优惠券适用于…

VS Code快速实现Git PR操作

注意:建议先学习git的基本操作。 安装插件 下图中红圈标记的插件都安装好。 Fork上游仓库 在网页上点击你想要fork的仓库,点击fork 然后该仓库就会fork到你的github账户下面,如下图。 现在可以在你账户下面的repo(我们称为下…

Allegro如何移动器件操作指导

Allegro如何移动器件操作指导 Allegro上可以任意移动器件,具体操作如下 选择Edit-move Find选择Symbols Point根据需要选择 Sym Origin是抓取器件的原点 Body center是抓取器件的中心 User Pick可以自定义抓取的原点,在移动整个模块的并且旋转的时候常用的命令 Sym Pin#设…

【抓包工具】win 10 / win 11:WireShark 下载、安装、使用

目录 一、WireShark 下载 二、WireShark 安装 (1)双击运行安装程序 (2)Choose Components:选择组件 (3)Additional Tasks:附加任务 (4)Choose lnstall …

Pikachu靶场全关攻略(超详细!)

一、靶场搭建 准备工具 phpstudy**pikachu靶场下载地址:**https://github.com/zhuifengshaonianhanlu/pikachu 搭建过程 将靶场文件夹放到phpstudy的www目录 进入pikach文件夹的inc目录,修改靶场配置文件config.inc.php,设置数据库账号密…

微服务框架 SpringCloud微服务架构 10 使用Docker 10.6 容器命令练习

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构10 使用Docker10.6 容器命令练习10.6.1 直接开干10 使用Docker 10.6 容器…

Stable Diffusion 2.0 来了

Stable Diffusion 一经发布,就立刻在业界掀起巨大的波浪。我个人后知后觉,直到 Stable Diffusion V1.4 版本发布,才接触 Stable Diffusion (之前使用的是 Disco Diffusion)。这段时间,SD 团队也没闲着,很快就发布了 V2…

HTML学生个人网站作业设计 明星易烊千玺介绍(HTML+CSS) web前端开发技术 web课程设计 网页规划与设计

🎉精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业…

2022年第十一届认证杯数学中国数学建模国际赛小美赛:C 题 对人类活动进行分类 建模方案及代码实现

2022年第十一届认证杯数学中国数学建模国际赛小美赛:C 题 对人类活动进行分类 建模方案及代码实现 1 题目 人类行为理解的一个重要方面是对日常活动的识别和监控。可穿戴活动识别系统可以在许多关键领域提高生活质量,如门诊监测、居家康复、跌倒检测等。…

[附源码]计算机毕业设计springboot校园代取快递系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

GameOff2022参与有感

GameOff2022参与有感以及年度总结 厚颜无耻的用我们美术的立绘 GameOff— Redemption 很高兴在一个月的时间里面和大家一起完成了《Redemption》 比赛链接:Itch.io 百度云盘链接: 链接:https://pan.baidu.com/s/1ylK0QRr2lmkqi4JF1wsXtA 提…

[附源码]计算机毕业设计springboot疫情管理系统

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

天宇优配|研判明年下半年投资机会或更大 险资看好“安全”与“发展”

上海证券报记者昨日获悉,多家稳妥资管公司已经拟定2023年出资战略,跟着本年以来多项稳经济方针逐步落地,险资遍及看好下一年经济复苏带来的商场出资时机。 权益出资方面,险资以为,当时股票商场估值处于前史较低水平&am…

重点问题!CPU利用率过高排查思路|原创

本文讲解了重点面试问题CPU利用率高如何排查和解决。点击上方“后端开发技术”,选择“设为星标” ,优质资源及时送达CPU利用率高怎么办?如何排查和解决这是一个常见的面试问题,也是线上常遇到的问题之一。遇到线上服务器异常告警&…

Maven的简单介绍

Maven 构件 <packaging> : pom、jar、ear、war以及maven-plugin,构建Maven之后所生成的文件类型&#xff0c;Pom本身不产生构件&#xff0c;用来作为依赖库。 pom类型常用于微服务中作为父Pom,通过 可以将子模块包含进来&#xff0c;共享父Pom的依赖&#xff0c; GAV坐标…

第十五章 如何编写README文档

README 文档对于开源项目的重要性甚至会超过代码本身。你试想一下&#xff0c;你打开一个 Github 项目&#xff0c;第一时间就会看到 README 文档&#xff0c;而这时候同一类的项目你可能有很多选择&#xff0c;如果这个README不正规&#xff0c;无法快速上手&#xff0c;你可能…