1. 安装：

npm install axios

2. 封装工具文件（src/utils/http.js）：

import axios from 'axios'

// 创建实例并配置基础路径、超时时间
const http = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 从环境变量读取（推荐）
  timeout: 10000
})

// 请求拦截器：添加 token、设置 headers 等
http.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
}, error => Promise.reject(error))

// 响应拦截器：统一处理错误、剥离响应数据等
http.interceptors.response.use(res => res.data, error => {
  // 统一错误提示（可结合 UI 库如 Vant 的 Toast）
  console.error('请求失败：', error.message)
  return Promise.reject(error)
})

export default http

3. 全局注册（在 main.js 中，替代 Vue 2 的 Vue.prototype）：

import { createApp } from 'vue'
import App from './TestA.vue'
import http from './utils/http' // 导入封装的 axios 实例

const app = createApp(App)
app.config.globalProperties.$http = http // 注册为全局属性
app.mount('#app')

# 4. 组件中使用（<script setup>）：
<script setup>
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance() // 获取全局属性代理

// 发起请求
const fetchData = async () => {
  try {
    const res = await proxy.$http.get('/api/data')
    console.log('请求结果：', res)
  } catch (err) {
    console.error('请求失败：', err)
  }
}
</script>