如何在utils.js中获取Nuxt上下文以使用localePath配置axios baseURL？

下面提供几种可行的方式来解决在Nuxt的utils.js中无法获取上下文，从而无法在axios baseURL中使用localePath的问题：

方案1：将axios实例改为可接收参数的函数 #

不要在utils.js中直接创建固定的axios实例，而是封装一个创建实例的函数，让调用方传入当前的locale或localePath结果：

// utils.js
import axios from 'axios'
import Qs from 'qs'

// 替换API_DOMAIN和apiURL为你的实际配置
const API_DOMAIN = 'https://your-api-domain.com'
const apiURL = 'v1'

export const createAxiosClient = (locale) => {
  return axios.create({
    baseURL: `${API_DOMAIN}/${locale}/${apiURL}`,
    headers: requestHeaders(),
    paramsSerializer: (params) => Qs.stringify(params, { arrayFormat: 'brackets' }),
  })
}

在组件/页面中调用时，从Nuxt上下文获取locale或localePath：

import { createAxiosClient } from '~/utils.js'

export default {
  async asyncData({ app }) {
    // 直接使用当前语言标识，或通过app.localePath('').slice(1)获取路径部分（去掉开头的/）
    const client = createAxiosClient(app.i18n.locale)
    const res = await client.get('/your-endpoint')
    return { data: res.data }
  }
}

方案2：通过Nuxt插件注入axios实例 #

利用Nuxt插件的上下文访问能力，在插件中创建axios实例并注入到全局，这样实例初始化时就能拿到localePath：

1. 创建plugins/axios-client.js：

import axios from 'axios'
import Qs from 'qs'

const API_DOMAIN = 'https://your-api-domain.com'
const apiURL = 'v1'

export default ({ app }, inject) => {
  // 用slice(1)去掉localePath返回的开头斜杠，比如/en变为en
  const localeSegment = app.localePath('').slice(1)
  const client = axios.create({
    baseURL: `${API_DOMAIN}/${localeSegment}/${apiURL}`,
    headers: requestHeaders(),
    paramsSerializer: (params) => Qs.stringify(params, { arrayFormat: 'brackets' }),
  })

  // 注入到全局，可通过this.$axiosClient或context.$axiosClient访问
  inject('axiosClient', client)
}

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

export default {
  plugins: ['~/plugins/axios-client.js']
}

3. 在组件/页面中使用：

export default {
  async asyncData({ $axiosClient }) {
    const res = await $axiosClient.get('/your-endpoint')
    return { data: res.data }
  }
}

方案3：动态更新axios的baseURL #

先在utils.js中创建基础axios实例，再通过方法动态设置baseURL，在Nuxt的上下文环境（如插件、布局）中调用该方法：

// utils.js
import axios from 'axios'
import Qs from 'qs'

const API_DOMAIN = 'https://your-api-domain.com'
const apiURL = 'v1'

const client = axios.create({
  headers: requestHeaders(),
  paramsSerializer: (params) => Qs.stringify(params, { arrayFormat: 'brackets' }),
})

export const setAxiosBaseURL = (localePath) => {
  const localeSegment = localePath.slice(1)
  client.defaults.baseURL = `${API_DOMAIN}/${localeSegment}/${apiURL}`
}

export default client

在Nuxt插件中初始化并监听语言变化：

// plugins/axios-config.js
import { setAxiosBaseURL } from '~/utils.js'

export default ({ app }) => {
  // 初始化baseURL
  setAxiosBaseURL(app.localePath(''))

  // 如果语言切换，重新设置baseURL
  app.i18n.onLanguageSwitched = () => {
    setAxiosBaseURL(app.localePath(''))
  }
}

在组件/页面中直接使用utils.js导出的client：

import client from '~/utils.js'

export default {
  async asyncData() {
    const res = await client.get('/your-endpoint')
    return { data: res.data }
  }
}

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