VUE i18n 中长文本段落的国际化答案

【问题标题】：Internazionalization in VUE i18n for long text paragraphVUE i18n 中长文本段落的国际化
【发布时间】：2021-01-05 07:53:01
【问题描述】：

使用 VUE i18n 处理长文本段落的最佳方法是什么？我知道我可以使用反引号 (``) 甚至保留回车，但这是要走的路吗？还是根据区域设置有条件地加载不同的 JSON 文件更好？

【问题讨论】：

标签： vue.js internationalization vue-i18n

【解决方案1】：

您可以在模板中使用以下内容来添加一些内容：{{ $t('deeply.nested.key') }} 并引用具有超长值的 JSON。如果您的块不需要纯文本以外的任何内容，那就没问题了。

如果您需要添加一些样式、一个新行、一些条件渲染或不仅仅是文本，我建议您使用component interpolation。它将防止在您的 JSON 中出现丑陋的内联 html/css。

在完全不同的话题上，确实，延迟加载语言环境也是一个好主意。

这里有一点sn-p的代码来说明如何实现它，更多细节可以在dedicated page找到。

// If the language hasn't been loaded yet
return import(/* webpackChunkName: "lang-[request]" */ `@/i18n/messages/${lang}.js`).then(
  messages => {
    i18n.setLocaleMessage(lang, messages.default)
    loadedLanguages.push(lang)
    return setI18nLanguage(lang)
  }
)

【讨论】：