使用 vuejs i18n 的多行文本答案

【问题标题】：multiline text using vuejs i18n使用 vuejs i18n 的多行文本
【发布时间】：2020-04-01 17:00:34
【问题描述】：

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

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

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

【问题讨论】：

你可以试试v-html或v-text来达到这个目的
谢谢，这是为了渲染，但是我如何在 i18n 标签中定义多行文本。如果“文本”变量是多行的？
@user1595929 你到底有没有发现什么？
我将值写在一行中，不太容易，但没有找到任何其他内容。

标签： javascript html vue.js internationalization vue-i18n

【解决方案1】：

你总是可以使用反引号：

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

你会收到一些关于 POJO 字符串的（无害的）警告。

【讨论】：

不适合我，我收到错误 unexpected token ' JSON at position xx。我用的是Nuxt，不知道有没有不同
我在nuxt中也使用了这个，所以你的错误可能与其他东西有关。
@BrunoMartins 可能有点晚了，但我认为问题在于使用普通的单引号字符 ' 与反引号字符 ` 相对应

【解决方案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>

【讨论】：

这比使用v-html 更好，谢谢
干净整洁的解决方案；需要更多支持
这是非常好的解决方案 :) thx

【解决方案3】：

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

i18n 文件：

{
  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

【讨论】：

【解决方案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>

【讨论】：

谢谢，这就是我所做的，但是对于单行的大文本书写并不实用。
v-html 会导致 XSS 攻击！除非您确定没有其他方法可以解决，否则不要使用它！
在插入用户内容时，v-html 不只是一个问题吗？如果您使用自己的文本，它将如何改变？ vuejs.org/v2/guide/security.html#Injecting-HTML
不要使用它，如果你想以这种方式使用它，你需要先清理你的 HTML！

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

您可以设置占位符并在翻译中多次使用它。在这个例子中，我使用的是 {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>

【讨论】：