Nuxt 3中通过插件配置Axios实例自定义参数不生效如何解决？

配置不生效是两个低级错误+一个兼容问题导致的：

• 配置项拼写错误：Axios 实例的基础路径配置项为baseURL（URL三个字母全大写），你写的baseUrl是无效参数，Axios 不会识别，自然不会拼接基础路径。
• 自定义实例缺少Nuxt封装的快捷方法：nuxtApp.$axios.create()生成的原生Axios实例，默认没有挂载Nuxt Axios模块封装的$get/$post这类自动解包响应数据的快捷方法，你调用$get时实际没有走自定义实例的配置逻辑。
• 跨环境兼容问题：Buffer是Node.js服务端专属API，客户端运行时不存在该对象，直接调用会触发客户端报错。

1. 替换插件代码 #

将plugins目录下的Axios插件代码替换为如下内容：

export default defineNuxtPlugin(nuxtApp => {
  const domain = 'http://localhost:3000/v1/'
  const username = "abcdef"
  const password = "123456"
  const token = `${username}:${password}`
  // 兼容服务端、客户端双环境的base64编码
  const encodedToken = process.server
    ? Buffer.from(token).toString('base64')
    : btoa(token)

  // 修正baseUrl拼写为baseURL
  const publicApi = nuxtApp.$axios.create({
    baseURL: domain,
    headers: {
      common: {
        Authorization: `Basic ${encodedToken}`
      }
    }
  })

  // 可选：给自定义实例挂载和全局$axios一致的$快捷方法，支持$get/$post等调用
  const requestMethods = ['get', 'post', 'put', 'delete', 'patch']
  requestMethods.forEach(method => {
    publicApi[`$${method}`] = (url, payload, config = {}) => {
      const reqConfig = ['get', 'delete'].includes(method)
        ? { ...config, params: payload }
        : { ...config, data: payload }
      return publicApi(url, {
        method,
        ...reqConfig
      }).then(res => res?.data ?? res)
    }
  })

  return {
    provide: {
      publicApi: publicApi
    }
  }
})

如果你不想手动挂载$开头的快捷方法，也可以直接调用Axios原生方法，手动取响应体的data字段即可：

// 原生方法调用示例
const res = await this.$publicApi.get('some_endpoint')
const data = res.data

2. 注意调用位置 #

不要在组件导出的顶层直接调用注入的$publicApi，要放到生命周期钩子、事件回调或者异步函数中调用，确保插件已经完成注册：

// 选项式API示例
export default {
  async mounted() {
    // 修复后可正常拿到配置后的实例
    const data = await this.$publicApi.$get('some_endpoint')
    console.log(data)
  }
}

如果用组合式API，通过useNuxtApp获取注入实例即可：

const { $publicApi } = useNuxtApp()
const fetchList = async () => {
  const data = await $publicApi.$get('some_endpoint')
}

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