Vue组件中i18n本地化文本如何正确实现换行

两种写法失效的核心原因是：Vue默认的{{ }}插值会把所有内容当做纯文本解析，\n不会被浏览器识别为换行（HTML默认会折叠空白字符），写<br>也会被转义为普通文本显示，不会作为HTML标签生效。

以下是两种可直接落地的实现方案，按需选择即可：

该方案不需要解析HTML，完全规避XSS注入问题，适合纯文本多语言场景。

1. 调整语言包配置，直接在需要换行的位置写入\n即可：

// locales/en.json
{
  "description": {
    "home": "home is \nwhere the heart is or \nanother random cliche sentence here"
  }
}

2. 给渲染翻译文本的容器添加white-space: pre-line样式，让浏览器识别文本中的换行符自动折行：

<!-- components/hello.vue -->
<template>
  <div style="white-space: pre-line">{{ $t("description.home") }}</div>
</template>

如果你的多语言文本中还需要搭配其他内联HTML标签（比如加粗、链接），可以用这个方案。

1. 调整语言包配置，直接写入原生<br>标签，不要转义为<br>：

// locales/en.json
{
  "description": {
    "home": "home is <br>where the heart is or <br>another random cliche sentence here"
  }
}

2. 不要用{{ }}插值，改用v-html指令渲染翻译内容，让浏览器解析其中的HTML标签：

<!-- components/hello.vue -->
<template>
  <div v-html="$t('description.home')"></div>
</template>

• 注意：v-html会直接渲染任意HTML内容，如果多语言文本存在用户可编辑的场景，会有XSS注入风险，纯文本换行优先选择方案1。

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