Vue项目中如何全局配置axios实现组件免重复导入？

嘿，我太懂你想要的那种不用重复导入、随手就能用的爽感了！之前vue-resource的Vue.use()确实省心，换成axios的话，我们可以通过全局挂载的方式实现同样的效果，只需要在main.js里配置一次，所有组件都能直接调用。下面分Vue 2和Vue 3两种情况给你说具体操作：

Vue 2 实现方式 #

在main.js里把axios挂载到Vue的原型上，这样所有组件都能通过this.$axios直接访问：

import Vue from 'vue'
import axios from 'axios'
import App from './App.vue'

// 挂载axios到Vue原型
Vue.prototype.$axios = axios

// 可选：配置全局默认项，比如baseURL、超时时间
axios.defaults.baseURL = 'https://your-api-domain.com/api'
axios.defaults.timeout = 5000

new Vue({
  render: h => h(App)
}).$mount('#app')

之后在任意组件里直接用就行，不用再导入：

export default {
  mounted() {
    this.$axios.get('/user/list')
      .then(res => {
        console.log('请求结果：', res.data)
      })
      .catch(err => {
        console.error('请求出错：', err)
      })
  }
}

Vue 3 实现方式 #

Vue 3移除了Vue.prototype，改用app.config.globalProperties来做全局挂载：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

// 全局挂载axios
app.config.globalProperties.$axios = axios

// 同样可以配置全局默认项
axios.defaults.baseURL = 'https://your-api-domain.com/api'
axios.defaults.timeout = 5000

app.mount('#app')

如果用的是<script setup>语法，因为setup里没有this，可以通过getCurrentInstance获取proxy来访问：

import { getCurrentInstance, onMounted } from 'vue'

onMounted(() => {
  const { proxy } = getCurrentInstance()
  proxy.$axios.get('/user/list')
    .then(res => {
      console.log('请求结果：', res.data)
    })
})

进阶：自定义axios实例（更推荐） #

如果你的项目需要多个不同配置的axios实例，或者想封装统一的请求拦截、响应拦截，建议先创建自定义实例再挂载：

// main.js
import Vue from 'vue' // Vue 2的话用这个，Vue 3用createApp
import axios from 'axios'

// 创建自定义axios实例
const api = axios.create({
  baseURL: 'https://your-api-domain.com/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// 添加请求拦截器
api.interceptors.request.use(config => {
  // 比如在这里统一加token
  config.headers.Authorization = localStorage.getItem('token')
  return config
})

// 添加响应拦截器
api.interceptors.response.use(response => {
  // 统一处理响应数据
  return response.data
}, error => {
  // 统一处理错误
  console.error('请求错误：', error)
  return Promise.reject(error)
})

// 挂载到全局
// Vue 2：Vue.prototype.$api = api
// Vue 3：app.config.globalProperties.$api = api

这样组件里就用this.$api（或proxy.$api）来调用，更灵活也更易维护。

内容的提问来源于stack exchange，提问作者FeRcHo