当前位置：首页 > news >正文

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

news 来源：原创 2025/6/7 4:43:28

一、安装依赖包

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