如何在i18n Trans组件中复用已有locale字符串避免重复内容？

方案1：在翻译字符串中用插值复用companyName #

修改翻译配置，通过i18n插值语法把companyName嵌入到welcome和contact中，同时保留标签占位符：

translation: {
   "companyName": "Stackoverflow",
   "welcome": "Welcome to <1>{{companyName}}</1>",
   "contact": "Contact to <1>{{companyName}}</1>"
}

之后在Trans组件里传递插值参数，保留原有标签结构即可：

<Trans i18nKey="welcome" values={{ companyName: $t('companyName') }}>
    Welcome to <strong>Stackoverflow</strong>
</Trans>
<Trans i18nKey="contact" values={{ companyName: $t('companyName') }}>
    Contact to <strong>Stackoverflow</strong>
</Trans>

这样companyName只需要定义一次，所有引用的地方都会同步更新。

方案2：自定义可复用的公司名称组件 #

创建一个封装公司名称的组件，比如命名为CompanyName.vue：

<template>
  <strong>{{ $t('companyName') }}</strong>
</template>

<script setup>
// 无需额外逻辑，直接复用翻译项
</script>

然后在Trans组件中直接使用这个组件：

<Trans i18nKey="welcome">
    Welcome to <CompanyName />
</Trans>
<Trans i18nKey="contact">
    Contact to <CompanyName />
</Trans>

同时调整翻译字符串，让标签占位符对应组件位置：

translation: {
   "companyName": "Stackoverflow",
   "welcome": "Welcome to <1></1>",
   "contact": "Contact to <1></1>"
}

这种方式既避免了文本重复，还能统一公司名称的样式。

方案3：翻译字符串嵌套翻译键（需库支持） #

如果你的i18n库支持翻译键嵌套解析（比如vue-i18n），可以直接在翻译字符串里引用companyName：

translation: {
   "companyName": "Stackoverflow",
   "welcome": "Welcome to <1>{{ $t('companyName') }}</1>",
   "contact": "Contact to <1>{{ $t('companyName') }}</1>"
}

之后Trans组件无需额外传参，直接使用即可：

<Trans i18nKey="welcome">
    Welcome to <strong>Stackoverflow</strong>
</Trans>
<Trans i18nKey="contact">
    Contact to <strong>Stackoverflow</strong>
</Trans>

注意：该方式需要确认你的i18n库支持此语法，不同库的实现可能有差异。

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