如何在Vue.js中全局配置自定义Axios实例，直接使用$api调用？

我来帮你搞定这个问题！你现在每次用axios实例都要手动import确实挺麻烦的，咱们把它改成全局可用的$api，以后用起来就方便多了～

首先看你的~/plugins/axios.js文件，我们只需要修改它的导出逻辑，把axios实例挂载到全局即可，分不同框架场景来说：

情况1：你用的是 Nuxt.js（符合你的文件路径场景） #

修改~/plugins/axios.js的内容如下：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/'
})

// 使用Nuxt的inject方法把api注入到全局
export default ({ app }, inject) => {
  inject('api', api)
}

接下来需要在nuxt.config.js里注册这个插件（如果还没注册的话），找到plugins数组，添加你的axios插件路径：

export default {
  // ...其他配置
  plugins: [
    '~/plugins/axios.js'
  ]
}

完成后，你就可以在任意组件、页面或者asyncData里直接使用this.$api（组件内）或者app.$api（服务端/插件环境）了，比如：

async mounted() {
  const res = await this.$api.get('/user/profile')
  console.log(res.data)
}

情况2：你用的是普通 Vue 2 项目 #

如果是Vue2，我们可以把axios实例挂载到Vue的原型上，修改plugins/axios.js：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/'
})

export default Vue => {
  Vue.prototype.$api = api
}

然后在main.js里引入并使用这个插件：

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

Vue.use(apiPlugin)

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

之后在组件里直接用this.$api调用即可。

情况3：你用的是 Vue 3 项目 #

Vue3不再推荐使用原型挂载，而是用globalProperties来配置全局属性，修改plugins/axios.js：

import axios from 'axios'

const api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/'
})

export default app => {
  app.config.globalProperties.$api = api
}

然后在main.js里注册：

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

const app = createApp(App)
app.use(apiPlugin)
app.mount('#app')

这样配置后，在Vue3组件里同样可以用this.$api（选项式API），如果是组合式API，你可以通过getCurrentInstance()来获取：

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const { appContext } = getCurrentInstance()
    const api = appContext.config.globalProperties.$api

    const fetchData = async () => {
      const res = await api.get('/posts')
      console.log(res.data)
    }

    return { fetchData }
  }
}

这样以后就不用每次都写import api from '~/plugins/axios'啦，直接用$api就能调用你的axios实例了～

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