vite,Vue3,ts项目关于axios配置

news2025/4/14 13:31:59

一、安装依赖包

npm install axios -S

npm install qs -S

npm install js-cookie

文件目录

二、配置线上、本地环境

与src文件同级,分别创建本地环境文件 .env.development 和线上环境文件 .env.production

 # 本地环境
ENV = development

# 本地环境接口地址
VITE_API_URL = http://localhost:3000

# 本地环境接口地址
VITE_API_URL2 = 

# 线上环境
ENV = production

# 线上环境接口地址
VITE_API_URL = 

# 线上环境接口地址
VITE_API_URL2 = http://jsonplaceholder.typicode.com

三、配置请求文件 src/api/base.ts

import axios from 'axios'
import qs from 'qs'
import { Dialog } from 'vant'
import { Session } from '../utils/storage'

// 创建 Axios 实例
const instance = axios.create({
  // baseURL: 'https://api.uomg.com/api', // 替换为你的 API 基础路径
  timeout: 10000, // 请求超时时间(单位:毫秒)
  headers: {
    'Content-Type': 'application/json',
  },
  paramsSerializer: {
    serialize(params) {
      return qs.stringify(params, { allowDots: true })
    },
  },
})
// 配置多个baseurl
instance.interceptors.request.use(
  (config: any) => {
    if (config.url.startsWith('/url3')) {
      config.baseURL = import.meta.env.VITE_API_URL2
    } else {
      config.baseURL = import.meta.env.VITE_API_URL
    }
    return config
  },
  (error) => {
    return Promise.reject(error)
  },
)

// 请求拦截器(不需登录校验)
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么,比如添加 token
    const token = localStorage.getItem('token') // 示例:从本地存储获取 token
    if (token && config.headers) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  (error) => {
    // 处理请求错误
    return Promise.reject(error)
  },
)

// 响应拦截器(不需登录校验)
instan

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

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

相关文章

STM32 模块化开发指南 · 第 4 篇 用状态机管理 BLE 应用逻辑:分层解耦的实践方式

本文是《STM32 模块化开发实战指南》第 4 篇,聚焦于 BLE 模块中的状态管理问题。我们将介绍如何通过有限状态机(Finite State Machine, FSM)架构,实现 BLE 广播、扫描、连接等行为的解耦与可控,并配合事件队列驱动完成主从共存、低功耗友好、状态清晰的 BLE 应用。 一、为…

HTML — 浮动

浮动 HTML浮动(Float)是一种CSS布局技术,通过float: left或float: right使元素脱离常规文档流并向左/右对齐,常用于图文混排或横向排列内容。浮动元素会紧贴父容器或相邻浮动元素的边缘,但脱离文档流后可能导致父容器高…

IP节点详解及国内IP节点获取指南

获取国内IP节点通常涉及网络技术或数据资源的使用,IP地址作为网络设备的唯一标识,对于网络连接和通信至关重要。详细介绍几种修改网络IP地址的常用方法,无论是对于家庭用户还是企业用户,希望能找到适合自己的解决方案。以下是方法…

AD9253 LVDS 高速ADC驱动开发

1、查阅AD9253器件手册 2、查阅Xilinx xapp524手册 3、该款ADC工作在125Msps下,14bit - 2Lane - 1frame 模式。 对应:data clock时钟为500M DDR mode。data line rate:1Gbps。frame clock:1/4 data clock 具体内容:…

pycharm2024.3.5版本配置conda踩坑

配置解释器是conda时,死活选不到自己的环境 看了很多,都是说要选scripts下的conda.exe 都没用 主要坑在于这是新版的pycharm 是配置condabin 下的 conda.bat 参考:PyCharm配置PyTorch环境(完美解决找不到Conda可执行文件python.exe问题) …

【异常处理】Clion IDE中cmake时头文件找不到 头文件飘红

如图所示是我的clion项目目录 我自定义的data_structure.h和func_declaration.h在unit_test.c中无法检索到 cmakelists.txt配置文件如下所示: cmake_minimum_required(VERSION 3.30) project(noc C) #设置头文件的目录 include_directories(${CMAKE_SOURCE_DIR}/…

14 - VDMA彩条显示实验

文章目录 1 实验任务2 系统框图3 硬件设计4 软件设计 1 实验任务 本实验任务是PS端写彩条数据至DDR3内存中,然后通过PL端的VDMA IP核将彩条数据通过HDMI接口输出显示。 2 系统框图 本实验是用HDMI接口固定输出1080P的彩条图,所以: rgb2lc…

PromptUp 网站介绍:AI助力,轻松创作

1. 网站定位与核心功能 promptup.net 可能是一个面向 创作者、设计师、营销人员及艺术爱好者 的AI辅助创作平台,主打 零门槛、智能化的内容生成与优化。其核心功能可能包括: AI艺术创作:通过输入关键词、选择主题或拖放模板,快速生成风格多样的数字艺术作品(如插画、海报…

金能电力:配电房为什么离不开绝缘胶板

在当今电力系统日益复杂、对供电稳定性与安全性要求极高的时代,每一个细节都关乎着电力供应的顺畅以及工作人员的生命安全。而配电房里常常被大家忽视的绝缘垫,实则起着至关重要的 “守护” 作用。今天,金能电力就来给大家详细讲讲配电房为什…

Python 深度学习实战 第1章 什么是深度学习代码示例

第1章:什么是深度学习 内容概要 第1章介绍了深度学习的背景、发展历史及其在人工智能(AI)和机器学习(ML)中的地位。本章探讨了深度学习的定义、其与其他机器学习方法的关系,以及深度学习在近年来取得的成…

【HD-RK3576-PI】VNC 远程桌面连接

在当今数字化时代,高效便捷的操作方式是技术爱好者与专业人士的共同追求。对于使用 HD-RK3576-PI微型单板计算机的用户而言,当面临没有显示屏的场景时,如何实现远程操作桌面系统呢?别担心,VNC 远程桌面连接将为你解决这…

电梯广告江湖的终局:分众 “吃掉” 新潮,是救赎还是迷途?

文 / 大力财经 作者 / 魏力 导言:商业世界的底层运行法则,从来都是能量流动的自然映射。宇宙第一性原理和运行法则是,能量大的吸引能量小的。电梯里的战争与和平,从对抗到合并,成为中国商业竞争史中关于博弈与进化的…

如何在 CentOS 7 系统上以容器方式部署 GitLab,使用 ZeroNews 通过互联网访问 GitLab 私有仓库,进行代码版本发布与更新

第 1 步: 部署 GitLab 容器​ 在开始部署 GitLab 容器之前,您需要创建本地目录来存储 GitLab 数据、配置和日志: #创建本地目录 mkdir -p /opt/docker/gitlab/data mkdir -p /opt/docker/gitlab/config mkdir -p /opt/docker/gitlab/log#gi…

第1章 对大型语言模型的介绍

人类正处在一个关键转折点。自2012年起,基于深度神经网络的人工智能系统研发进入快速通道,将这一技术推向了新高度:至2019年底,首个能够撰写与人类文章真假难辨的软件系统问世,这个名为GPT-2(生成型预训练变…

Quartus II的IP核调用及仿真测试

目录 第一章 什么是IP核?第二章 什么是LPM?第一节 设置LPM_COUNTER模块参数第二节 仿真 第三章 什么是PLL?第一节 设置ALTPLL(嵌入式锁相环)模块参数第二节 仿真 第四章 什么是RAM?第一节 RAM_1PORT的调用第…

JDK(Java Development Kit)从发布至今所有主要版本 的详细差异、新增特性及关键更新的总结,按时间顺序排列

以下是 JDK(Java Development Kit)从发布至今所有主要版本 的详细差异、新增特性及关键更新的总结,按时间顺序排列: 1. JDK 1.0 (1996) 发布年份:1996年1月23日关键特性: Java首次正式发布。核心语言特性…

通过websocket给服务端发送订单催单提醒消息

controller层 GetMapping("/reminder/{id}")public Result Remainder(PathVariable("id") Long id){orderService.remainder(id);return Result.success();} 实现类 Overridepublic void remainder(Long id) {Orders ordersDB orderMapper.getById(id);…

c++ 表格控件 UltimateGrid 控件实例

控件区域: 使用效果: 代码如下: void MyUGCtrl::OnSetup() { m_nButtonIndex AddCellType(&m_button); SetNumberCols(6); AppendRow(); CUGCell cell; int rows, cols; int row 0; // 头部 int nHeaderRow -1; …

使用 VcXsrv 在 Windows 10 上运行 Ubuntu 图形界面

VcXsrv 是一款用于 Windows 的开源 X 服务器,它允许在 Windows 系统上显示 Linux 的图形应用程序。当在 Windows 10 上安装并正确配置 VcXsrv 后,通过设置 WSL2 中的DISPLAY环境变量,使其指向运行 VcXsrv 的 Windows 主机的 IP 地址&#xff…

LSTM-SVM长短期记忆神经网络结合支持向量机组合模型多特征分类预测/故障诊断,适合新手小白研究学习(Matlab完整源码和数据)

LSTM-SVM长短期记忆神经网络结合支持向量机组合模型多特征分类预测/故障诊断,适合新手小白研究学习(Matlab完整源码和数据) 目录 LSTM-SVM长短期记忆神经网络结合支持向量机组合模型多特征分类预测/故障诊断,适合新手小白研究学习…