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

news2024/11/15 21:25:26

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.coloradmin.cn/o/56693.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

SEAL 0.3 正式发布:国内首个全链路软件供应链安全管理平台

12月1日,软件供应链安全管理平台 SEAL 0.3 正式发布(以下简称“SEAL”),这是国内首个以全链路视角保护软件供应链的安全管理平台。两个月前 SEAL 0.2 发布,该版本创新性地提供了依赖项的全局汇总与关联,用户…

DSP篇--C6678功能调试系列之SPI调试

目录 1、初始化 2、数据传输 1、初始化 Perform the following procedure for initializing the SPI: 1. Reset the SPI by clearing the RESET bit in the SPI global control register 0 (SPIGCR0) to 0. 2. Take the SPI out of reset by setting SPIGCR0.RESET to 1. 3. …

【使用 BERT 的问答系统】第 6 章 :BERT 模型应用:其他任务

🔎大家好,我是Sonhhxg_柒,希望你看完之后,能对你有所帮助,不足请指正!共同学习交流🔎 📝个人主页-Sonhhxg_柒的博客_CSDN博客 📃 🎁欢迎各位→点赞…

【大数据入门核心技术-Zookeeper】(三)Zookeeper的选举机制和流程

目录 一、Zookeeper的选举机制 1、每一个 Server 都会发出一个投票 2、接收来自各个 Server 的投票 3、处理投票 4、统计投票 5、改变服务器状态 二、Zookeeper的选举流程 一、Zookeeper的选举机制 Zookeeper 在配置文件中并没有指定 Master 和 Slave。但是,…

软件测试培训之十个无脚本测试方案

1.自然语言处理(NLP) 目前,一些最新的无脚本自动化测试工具能够通过采用NLP语法,来创建各种测试用例。就像编写简单的英语语句一样,用户可以轻松地实现测试用例的自动化。此类工具一般会带有AI驱动的内核,因此大幅节省了用户对其维…

【遥感图像融合:梯度指导:纹理细节】

GTP-PNet: A residual learning network based on gradient transformation prior for pansharpening (一种基于梯度变换的剩余学习网络) 提出了一种基于梯度变换先验的残差学习网络GTP-PNet,用于生成光谱分布准确、空间结构合理的高质量HRM…

车间生产设备管理有哪些问题?低代码来助力

随着科学技术对生产技术与生产工艺流程的不断改革创新,同时受市场变化的影响,企业生产管理模式也发生了巨大的改变,对车间生产设备管理的要求更高,并在一定层面推动了车间生产设备管理模式的创新和转变发展。但由于不同的企业面对…

JavaScript---DOM---DOM简介、获取元素、事件基础、操作元素---11.5

DOM简介 什么是DOM 文档对象模型(Document Object Model,简称DOM)是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口。 W3C已经定义了一系列的DOM接口,通过这些DOM接口可以改变网页的内容、…

[附源码]计算机毕业设计springboot学生宿舍管理系统

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

如何在 Windows 10/8.1/8/7 上无密码删除 Deep Freeze

如何在 Windows 10/8.1/8/7 上无密码删除 Deep Freeze 有些人认真对待计算机安全问题。这些人会安装 Deep Freeze 冰点来保护他们的计算机。该应用程序的便利之处在于它会在重新启动时将计算机恢复到原始的预设配置。因此,可以轻松消除重启之间发生的任何变化&#…

海量数据如何在Web端实现动态可视化?看看这家企业是怎么做的

“我们TestLogger公司是一家赛车行业的软件公司,主要是通过分析在赛道上多个传感器收集到的赛车数据,帮助提高赛车性能。TestLogger Analyzer就是其中的一款核心数据分析工具,在我们构建该工具的第一个产品原型时,就发现由于不同类…

(附源码课件)10款Java小游戏满足你各种需求

游戏推荐 黄金矿工项目 飞机大战项目 超级玛丽项目 坦克大战项目 大鱼吃小鱼项目 飞翔的小鸟项目 扫雷项目 贪吃蛇项目 推箱子项目 本套视频课程包含: 1、王者荣耀项目 开发环境:jdk1.8 开发工具:eclipse JavaEE基础如下:变量、数据类型…

[附源码]计算机毕业设计springboot校友社交系统

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

uni-app入门:自定义tabbar

本文介绍如何使用vant Weapp定义自定义tabbar.按照自定义图标的方式进行添加: 自定义tabbar微信官方链接: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 1.导入vant weapp并构建npm 项目根目录右键选择外部终端窗口中打开 …

Numpy入门[2]——Matplotlib 基础

Numpy入门[2]——Matplotlib 基础 参考: https://ailearning.apachecn.org/ Python直接使用plot()函数画图 使用Jupyter进行练习 在使用Numpy之前,需要了解一些画图的基础。 Matplotlib是一个类似Matlab的工具包,主页地址为 http://matplot…

梁建章:旅行重回全球时代主题 构建“创新与传承”大场景

近日,在“防疫二十条”等最新措施基础上,国内多地宣布优化调整防疫措施,旅游市场复苏节奏也有望加速推进。 12月2日,携程集团在澳门举办“与时聚进”2022全球合作伙伴峰会。携程集团联合创始人、董事局主席梁建章,携程…

JS中常用的Date内置对象&处理Date内置对象的一些方法

JavaScript 中的对象分为3种:自定义对象 、内置对象、 浏览器对象 内置对象就是指 JS 语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能 JavaScript 提供了多个内置对象:Math、 Date 、Array…

2023最新SSM计算机毕业设计选题大全(附源码+LW)之java高校教师科研能力评定系统40n60

要对当前自己的学校对于计算机毕业设计的要求以及严格程度有所了解,这个主要是借助上一届已经毕业的学长学姐了解一下,但是有一点要注意的是,对于每一届毕业生的毕业设计的处理,学校都有很大的调整,这一点尤其重要。其…

springboot基于微信小程序的社区居家养老互助服务管理平台设计与实现毕业设计源码062027

基于springboot微信小程序的社区居家养老互助系统 摘 要 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小…

springboot毕业生跟踪调查管理系统毕业设计源码061528

springboot毕业生跟踪调查管理系统 摘 要 信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克的课题。针对毕业生跟…