使用 vuejs i18n 的多行文本

Question

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

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

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

Answer 1

#1. 您可以使用反引号：

国际化文件：

{
  text: `Content
  With some 
  Break lines`
}

#2. 可以结合使用js和css

{
  text: 'Content \n With some \n Break lines'
}

CSS：

.class {
   white-space: pre-line
}

＃3。您可以使用 HTML 和 v-html（但要小心，因为如果不清理 HTML，您会导致 XSS 攻击！）

{
  text: 'Content <br /> With some <br /> Break lines'
}

模板：

<div v-html="yourI18nRule" />

在此处了解有关清理 HTML 的更多信息：

https://www.npmjs.com/package/sanitize-html

Answer 2

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

en.json

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

页脚.vue

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

Answer 3

你总是可以使用反引号：

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

不过，您会收到一些关于 POJO 字符串的（无害的）警告。

Answer 4

尝试实现以下代码行，因为它对我有用：

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



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