javascript - 使用 Vue I18n 和大内容文本 html 的最佳方式

Question

我不得不在我的观点中加入大量文字。这些文本以 HTML 标记。

目前，使用 Vue l18n，我有一个看起来像这样的 en.json 文件

{
  "ok": "Ok",
  "cancel": "Cancel",
  "error_alert_title": "Oops...",
  …
}

要翻译一个词或一行，我在我的组件中执行此操作。

$t('cancel')

效果很好!

现在，我想知道你们将大文本翻译成 .vue 的方法。我试图将它放入 JSON 文件中，但它...无法维护。

"mytext": "<p style="text-align: left;">Maecenasfaucibusmollisinterdum. Fuscedapibus, tellus ac cursuscommodo, tortormauriscondimentumnibh, utfermentummassajusto</p><p style="text-align: left;"><strong>sit amet risus. Donec sed</strong> odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Duis mollis,</p><p style="text-align: left;">est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper. Curabitur blandit</p><p style="text-align: left;">tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.<br /><br /></p>"

您是否有使用愉快且易于维护的解决方案？

谢谢

Answer 1

而不是将 HTML 元素放入语言 JSON 文件中。您可以直接翻译 HTML 模板本身的内部文本。

en.json :

{
    'p1Text': 'Maecenasfaucibusmollisinterdum. Fuscedapibus, tellus ac cursuscommodo, tortormauriscondimentumnibh, utfermentummassajusto',
    'p2Text': '{strongText} odio dui. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Duis mollis',
    'p2StrongText': 'sit amet risus. Donec sed',
    'p3Text': 'est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Vestibulum id ligula porta felis euismod semper.Curabitur blandit',
    'p4Text': 'tempus porttitor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Etiam porta sem malesuada magna mollis euismod. Vestibulum id ligula porta felis euismod semper. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.'
}

模板将如下所示:

<p style="text-align: left;">{{ $t('p1Text') }}</p>
<i18n path="p2Text" style="text-align: left;" tag="p">
  <template v-slot:strongText>
    <strong>{{ $t('p2StrongText') }}</strong>
  </template>
</i18n>
<p style="text-align: left;">{{ $t('p3Text') }}</p>
<p style="text-align: left;">{{ $t('p4Text') }}<br/><br/></p>