Nuxt3 3.11.2版本下I18n模块无法显示消息内容

1. 确认组件内的调用方式 #

因为你设置了legacy: false，必须使用Composition API的useI18n，不能用传统的$t方法：

<template>
  <div>{{ t('welcome') }}</div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>

2. 修正i18n配置的潜在问题 #

• 移除nuxt.config.ts中build.transpile的/vue-i18n/配置，Nuxt3 I18n模块已自动处理转译，手动添加可能引发冲突
• 调整detectBrowserLanguage配置，避免因浏览器语言不在列表中导致的异常重定向：

// nuxt.config.ts
i18n: {
  locales: ['en', 'ar'],
  defaultLocale: 'en',
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: "i18n_redirected",
    alwaysRedirect: false,
    fallbackLocale: 'en'
  },
  vueI18n: "./i18n.config.ts",
}

3. 验证配置文件路径 #

确保i18n.config.ts在项目根目录下，与nuxt.config.ts同级，路径无误。

4. 清除缓存与Cookie #

• 清除浏览器缓存和名为i18n_redirected的Cookie，避免旧语言设置干扰
• 重启Nuxt开发服务，执行npx nuxt clean清除构建缓存

5. 检查依赖版本兼容性 #

确保@nuxtjs/i18n版本与Nuxt3匹配，建议安装最新稳定版：

npm install @nuxtjs/i18n@latest

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