Nuxt 3 结合@nuxtjs/i18n：services/brand.ts翻译失效如何解决？

在Nuxt 3 + @nuxtjs/i18n的项目中，独立service文件无法直接通过this.$t或未导入的t函数调用翻译——这类文件没有Vue组件上下文，因此需要通过useI18n组合式函数获取翻译实例，具体修改如下：

修改后的services/brand.ts代码 #

import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

export function getBrands() {
  // 在函数内部调用useI18n获取翻译函数t
  const { t } = useI18n()
  
  const brands = ref([
    {
      headline: t('brakes')
    },
  ])

  return brands
}

关键注意事项 #

• 组合式函数调用时机：useI18n必须在Nuxt的上下文环境中调用（比如组件的setup函数、其他组合式函数内部、server路由处理函数中），不能在函数外部或非上下文环境执行。
• 确保i18n基础配置正确：检查nuxt.config.ts中的i18n模块配置，确认已定义对应语言的翻译文本，示例配置：

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: ['en', 'zh'],
    defaultLocale: 'en',
    messages: {
      en: {
        brakes: 'Brakes'
      },
      zh: {
        brakes: '刹车'
      }
    }
  }
})

• 服务端场景适配：如果该service在服务端使用（如server/api接口），可通过useRequestHeaders获取请求头中的语言信息，配合useI18n设置对应locale：

import { useRequestHeaders } from 'nuxt/app'

export function getBrands() {
  const { t, setLocale } = useI18n()
  const headers = useRequestHeaders(['accept-language'])
  
  // 根据请求头设置语言（示例逻辑，可按需调整）
  const locale = headers['accept-language']?.split(',')[0] || 'en'
  setLocale(locale)

  const brands = ref([
    {
      headline: t('brakes')
    },
  ])

  return brands
}

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