Nuxt-i18n中如何在翻译命名参数中插入HTML内容？

架构老林

2026-6-28

解决Nuxt 3 + Nuxt-i18n中HTML插值及<i18n>组件无法使用的问题

问题核心

你在使用Nuxt-i18n构建多语言站点时，尝试用<i18n>组件实现带HTML的翻译内容，但组件无法被识别；直接导入vue-i18n的组件又因依赖层级问题导致构建失败。以下是两种可靠的解决方案：

方案一：全局注册`<i18n>`组件

Nuxt-i18n v8+在Composition API模式（legacy: false）下不会自动全局注册<i18n>组件，你可以通过Nuxt插件手动注册：

在项目根目录创建plugins/i18n-component.ts文件：

import { I18n } from 'vue-i18n'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component('i18n', I18n)
})

Nuxt会自动加载该插件，之后你就能在组件中正常使用最初的<i18n>组件代码：

<i18n path="venue.intro-1" tag="p">
  <template v-slot:island>
     <a
       :href="$t('venue.island-link')"
       target="_blank"
       rel="noopener noreferrer"
     >
       {{ $t('venue.intro-1-island-name') }}
     </a>
  </template>
</i18n>

方案二：使用`$t`配合`v-html`（适合简单场景）

如果不想注册组件，可通过v-html指令渲染带HTML的翻译结果，但需注意仅在内容完全可控时使用（避免XSS风险）：

在翻译文件（如en.json）中定义带占位符的字符串：

{
  "venue": {
    "intro-1": "Welcome to our venue on {island}",
    "island-link": "/island-info",
    "intro-1-island-name": "Sunset Island"
  }
}

在组件中通过v-html插入HTML内容：

<p v-html="$t('venue.intro-1', { 
  island: `<a href='${$t('venue.island-link')}' target='_blank' rel='noopener noreferrer'>${$t('venue.intro-1-island-name')}</a>` 
})"></p>