i18next-vue调用t()返回函数而非翻译字符串问题求助

配置vue-i18next后，无论直接调用i18next.t()还是在组件中通过useTranslation()获取的t()，都返回一个函数而非预期的翻译字符串：

(ctx) => {const { normalize: _normalize } = ctx;return _normalize(["MY TRANSLATED STRING"])}

相关代码 #

utils/i18n/i18next.ts #

import i18next from "i18next"
import fr from "@/locales/fr.json"

const i18nCreated = i18next.init({
  lng: "fr",
  interpolation: {
    escapeValue: false,
  },
  fallbackLng: false,
  resources: { fr: { translation: fr } },
})

export { i18nCreated, i18next }

main.ts #

import { i18nCreated, i18next } from "@/utils/i18n/i18next"
import I18NextVue from "i18next-vue"
// ...
await i18nCreated

console.log(i18next.t("home.title"))

app.use(I18NextVue, {
  i18next,
})

解决方案 #

1. 检查版本兼容性 #

i18next-vue与i18next存在严格版本依赖：

• i18next-vue v2.x 要求 i18next >= 22.0.0
• 执行以下命令调整版本至兼容组合：

  # 升级到最新兼容版本
  npm install i18next@latest i18next-vue@latest
  # 或降级到稳定兼容版本
  npm install i18next@22.5.0 i18next-vue@2.0.0
  

2. 确认翻译资源格式正确 #

确保fr.json是标准键值对JSON结构，无函数或非字符串值：

{
  "home.title": "Bonjour le monde"
}

3. 验证初始化完成状态 #

在await i18nCreated后添加状态校验，确认i18next已完成初始化：

await i18nCreated
console.log(i18next.isInitialized) // 应输出true
console.log(i18next.t("home.title"))

4. 启用vue-i18next兼容模式 #

若使用i18next-vue v2.x，添加兼容配置修复t函数行为：

app.use(I18NextVue, {
  i18next,
  useVueI18nextCompat: true
})

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