Nuxt3中无法使用Vue I18n v9的<i18n>代码块求助

问题场景 #

使用Nuxt 3结合vue-i18n v9，尝试在单文件组件的<i18n>代码块中存放翻译内容，但$t('hi')无法正确渲染对应语言的文本。

修复步骤 #

1. 清理重复依赖 #

你的package.json中同时存在@intlify/unplugin-vue-i18n和@intlify/vite-plugin-vue-i18n，两者功能重叠，保留新版的unplugin即可：

• 删除package.json中devDependencies下的@intlify/vite-plugin-vue-i18n
• 执行npm install或yarn install重新安装依赖

2. 修正Nuxt配置文件 #

更新nuxt.config.ts，完善vue-i18n相关配置：

import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'
import path from 'path'

export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt','@nuxtjs/tailwindcss' ,'@nuxt-hero-icons/outline/nuxt','@nuxt-hero-icons/solid/nuxt'
  ],
  runtimeConfig: {
    public: {
     captchaKey: 'a', 
      apiUrl:'z'
    }
  },
  // 添加vue-i18n核心配置
  vueI18n: {
    legacy: false, // 禁用legacy模式，适配vue-i18n v9的composition API
    locale: 'en', // 默认语言
    fallbackLocale: 'en', // 降级语言
    messages: {} // 全局翻译可在此定义，组件内的<i18n>代码块会自动注入
  },
  vite: {
    plugins: [
      VueI18nVitePlugin({
        // 覆盖所有包含<i18n>代码块的文件路径
        include: [
          path.resolve(__dirname, './components/**/*.vue'),
          path.resolve(__dirname, './pages/**/*.vue'),
          path.resolve(__dirname, './layouts/**/*.vue'),
        ],
        runtimeOnly: false, // 开发环境关闭runtimeOnly，方便调试
      })
    ]
  }
})

3. 确保组件内代码正确 #

在组件中使用useI18n组合式API（或直接使用$t），并确认<i18n>代码块格式无误：

<template>
  {{ t('hi') }}
</template>

<script setup>
// 显式导入useI18n（可选，$t也可直接使用）
const { t } = useI18n()
</script>

<i18n>
{
  "en": {
    "hi": "hello world!"
  },
  "ja": {
    "hi": "こんにちは、世界！"
  }
}
</i18n>

4. 重启开发服务 #

修改配置后，关闭当前Nuxt开发服务，重新执行npm run dev或yarn dev，确保配置生效。

额外检查点 #

• 确认<i18n>代码块的JSON语法无错误（如多余逗号、引号缺失）
• 如果需要切换语言，可通过useI18n的locale属性设置，示例：

  <script setup>
  const { locale } = useI18n()
  const switchToJa = () => {
    locale.value = 'ja'
  }
  </script>
  

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