Vue3中Vue I18n嵌套变量失效，如何实现Vue2同款用法？

在Vue3搭配vue-i18n v9+版本时，原Vue2中使用@:引用嵌套翻译键的语法不再生效，可通过以下几种方式解决：

方法一：使用内联$t调用（推荐） #

修改翻译JSON文件，用{{ $t('键路径') }}替代原@:语法：

{
  "info": "Email: <a href=\"mailto:{{ $t('contact-details.email') }}\">{{ $t('contact-details.email') }}</a>",
  "contact-details": {
    "phone": "123456789",
    "email": "email@email.com"
  }
}

组件中调用时，需用v-html渲染带HTML的内容：

<template>
  <div v-html="$t('info')"></div>
</template>

如果使用Composition API：

<template>
  <div v-html="t('info')"></div>
</template>

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

方法二：通过插值传递参数 #

调整翻译消息为占位符形式，调用时传入嵌套键的翻译结果：
翻译JSON文件：

{
  "info": "Email: <a href=\"mailto:{email}\">{email}</a>",
  "contact-details": {
    "phone": "123456789",
    "email": "email@email.com"
  }
}

组件中调用：

<!-- Options API -->
<template>
  <div v-html="$t('info', { email: $t('contact-details.email') })"></div>
</template>

<!-- Composition API -->
<template>
  <div v-html="t('info', { email: t('contact-details.email') })"></div>
</template>

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

方法三：开启兼容模式（不推荐） #

若想继续使用原@:语法，可在vue-i18n配置中开启legacy兼容模式：

// main.js
import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'
import App from './App.vue'

const i18n = createI18n({
  legacy: true, // 开启v8兼容模式
  locale: 'en',
  messages: {
    en: {
      info: "Email: <a href=\"mailto:@:contact-details.email\">@:contact-details.email</a>",
      "contact-details": {
        phone: "123456789",
        email: "email@email.com"
      }
    }
  }
})

createApp(App).use(i18n).mount('#app')

此模式仅为兼容旧代码设计，不建议长期使用，未来版本可能移除。

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