如何在ES6模块中访问@nuxtjs/axios的模块实例

DevOps 小满

2026-9-25

你直接导入@nuxtjs/axios或者原生axios拿不到项目中已经配置好的实例，因为@nuxtjs/axios是Nuxt专属模块，它会基于你的配置生成专属实例，通过Nuxt运行时上下文注入到组件、Vuex中，直接导入原始包不会携带你项目中的baseURL、拦截器等配置，所以请求无法正常执行。

以下是两种可行的解决方法：

方案1：全局挂载实例（适合通用工具类模块调用）

新增axios插件，在plugins目录下新建axios.js：

export default ({ $axios }, inject) => {
  // 保留Nuxt原有注入逻辑
  inject('axios', $axios)
  // 挂载到全局环境供普通ES6模块调用
  if (process.client) {
    window.__NUXT_AXIOS_INSTANCE__ = $axios
  } else {
    global.__NUXT_AXIOS_INSTANCE__ = $axios
  }
}

在nuxt.config.js中注册该插件：

modules: [
  '@nuxtjs/axios',
],
plugins: [
  '~/plugins/axios'
]

在普通ES6模块中调用：

// 你的自定义ES6模块，比如/utils/request.js
const getAxios = () => {
  return process.client ? window.__NUXT_AXIOS_INSTANCE__ : global.__NUXT_AXIOS_INSTANCE__
}

// 封装请求
export const getList = async (params) => {
  const axios = getAxios()
  return axios.get('/api/list', { params })
}

方案2：参数透传（适合业务封装模块调用，更安全）

如果你的ES6模块仅在组件、Vuex等能拿到注入实例的场景调用，可以直接将$axios作为参数传入，不需要全局挂载：

封装请求的ES6模块：

// /api/goods.js
export const getGoodsDetail = (axios, goodsId) => {
  return axios.get(`/api/goods/${goodsId}`)
}

组件内调用时传入实例：

import { getGoodsDetail } from '~/api/goods'

export default {
  async asyncData({ $axios }) {
    const detail = await getGoodsDetail($axios, 1001)
    return { detail }
  }
}