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

Question

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

Answer 1

您可以在模板中使用以下内容来对某些内容进行国际化：{{ $t('deeply.nested.key') }} 并引用具有超长值的 JSON。如果您的块只需要纯文本，就可以了。

如果您需要添加一些样式、新行、一些条件渲染或除文本以外的任何内容，我建议您使用 component interpolation。它将防止在 JSON.

中出现难看的内联 html/css

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

这里是关于如何实现它的一小段代码，更多细节可以在 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)
  }
)

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

Internazionalization in VUE i18n for long text paragraph

internationalization

vue.js

vue-i18n