Question

我正在使用i18n单个文件组件在我的应用程序上提供翻译支持。为此，我正在使用以下标记

<i18n>
{
  "fr": {
    "text": "blabla in french 
             blabla
             bla"
  },
  "en": {
    "text": "blabla in english
             bla"
  }
}
</i18n>

但是我有多行带有html格式的文本，如何对长html文本使用语言处理？

Answer 1

您总是可以使用反引号：

<i18n>
{
  "fr": {
    "text": `blabla in french 
             blabla
             bla`
  },
  "en": {
    "text": `blabla in english
             bla`
  }
}
</i18n>

尽管如此，您会收到一些关于POJO字符串的警告（无害）。

Answer 2

找到了一个很酷的解决方案here。可以通过插值来实现这一点。在此示例中，{0} 占位符将替换为您放入 <i18n> 标记中的内容。

en.json

{
  "footer": "Built with Vue and Vue I18n{0}Powered by an excessive amount of coffee"
}

Footer.vue

<template>
  <i18n path="footer" tag="p" class="footer">
    <br />
  </i18n>
</template>

Answer 3

尝试实现以下对我有用的代码行：

<i18n>
{
    "fr": {
        "text": "blabla in french <br /> blabla <br /> bla"
    },
    "en": {
        "text": "blabla in english <br /> bla"
    }
}
</i18n>



<span v-html="$t('text')"></span>

Answer 4

您尝试过 yaml format 吗？你只需要安装“yaml-loader”并按照文档中的描述修改你的 vue.config.js 文件。然后，您可以执行以下操作：

<i18n>
  fr:
    text: |
      blabla in french
      blabla
      bla
  en:
    text: |
      blabla in english
      bla
</i18n>

Answer 5

您可以设置占位符并在翻译中多次使用它。在这个例子中，我使用了 {br}，而且我还有一个电子邮件地址的占位符。

 Body:
    "Email was sent to {EmailAddress}{br}{br}Please enter the validation code below.{br}{br}If you have not received this email, please check your spam folder.",

然后在 vue 组件中我把这个

  <i18n-t tag="h3" keypath="Body">
    <template v-slot:br><br /></template>
    <template v-slot:EmailAddress> yo@mama.com </template>
  </i18n-t>

使用vuejs i18n的多行文字

5 个答案:

尝试实现以下对我有用的代码行：