Vue3 vue-i18n 延迟加载答案

【问题标题】：Vue3 vue-i18n Lazy loadingVue3 vue-i18n 延迟加载
【发布时间】：2022-06-20 17:42:11
【问题描述】：

我想在我的 APP 中实现个别语言的延迟加载，但是我不太了解这个示例。示例：https://vue-i18n.intlify.dev/guide/advanced/lazy.html

i18n.js

import { nextTick } from 'vue'
import { createI18n } from 'vue-i18n'

export const SUPPORT_LOCALES = ['de', 'en']

export function setupI18n(options = { locale: 'de' }) {
  const i18n = createI18n(options)
  setI18nLanguage(i18n, options.locale)
  return i18n
}

export function setI18nLanguage(i18n, locale) {
  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale
  } else {
    i18n.global.locale.value = locale
  }
  document.querySelector('html').setAttribute('lang', locale)
}

export async function loadLocaleMessages(i18n, locale) {
  // load locale messages with dynamic import
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales    /${locale}.json`
  )

  // set locale and locale message
  i18n.global.setLocaleMessage(locale, messages.default)

  return nextTick()
}

我的文件夹结构看起来很相似。我现在不使用组合 API。

我想定义一种可以在用户设置中更改的默认语言，而不是通过 vue-router 加载语言。

现在我必须在哪里以及如何加载函数“loadLocaleMessages()”？

目前我像这样在我的 main.js 中加载配置，以便在模板中使用“$t”：

import { setupI18n } from "@/plugins/i18n";
...
app.use(setupI18n());
...

i18n.js 在示例中看起来只是我的语言路径不同。

另外我想知道我必须如何包含所有内容，以便我拥有例如"$t" 也可用于其他（不是组件）？例如。在 routes.js 或商店中（vuex）

编辑： middlewares.js - beforeEachHook

import { i18n } from "@/plugins/i18n"
const { t } = i18n.global

/**
 * Translate/set page title
 */
export function setPageTitleMiddleware (to, from, next) {
    const pageTitle = to.matched.find(item => item.meta.title)

    if (to.meta && to.meta.title)
        window.document.title = process.env.VUE_APP_DOMAIN_TITLE + ' | ' + t(to.meta.title)
    else if
        (pageTitle && pageTitle.meta) window.document.title = process.env.VUE_APP_DOMAIN_TITLE + ' | ' + t(pageTitle.meta.title)

    next()
}

【问题讨论】：

请在问题中发布相关代码，它应该是可以理解的，无需导航到可能更改的外部链接。 “我如何必须包含所有内容以便我拥有例如” - 这就是 JS 导入的目的。在使用的地方导入t
感谢回复，我已添加代码。我知道进口是如何运作的——这不是问题。如果我正确理解了文档，$t 应该是全局可用的——我担心我必须如何/在哪里调用“loadLocaleMessages()”，然后我是否必须这样做。 main.js "从 "@/plugins/i18n" 导入 { setupI18n };"或者如果那已经错了。
当用户选择他们想要显示的语言时，您将调用 loadLocaleMessages。 $t 在组件之外真的不需要。它仅用于帮助显示文本。对路线使用主要语言，并仅在组件中存储和翻译。（即，不要使用翻译的文本，而是使用翻译键）。
但是如果我没有变量“i18n”，如何调用“loadLocaleMessages(i18n, locale)”？我通常会使用“import { i18n} from '@/plugins/i18n'”来执行此操作，根据文档，我不再拥有它 - 我在这里有一个功能，如果我是对的，我必须导入以下内容： “从 '@/plugins/i18n' 导入 { setupI18n }”，对吗？我使用 $t 的一个例子是通过路由器中间件设置页面标题： window.document.title = process.env.VUE_APP_DOMAIN_TITLE + ' | ' + t(general.${pageTitle.meta.title})
不，它不应该是全球可用的。 $t 在组件模板中可用，因为在每个组件中导入它并在组件实例上公开它会很乏味。 i18n.t 并非如此。您需要在某处导出 const i18n = setupI18n(..)（也可以在 i18n.js 中）并将其导入使用它的位置。您可以将其解构为 t 以减少冗长。 “我必须在哪里以及如何加载函数” - 在根组件或路由器挂钩的某个地方？这个想法是您需要在显示消息之前完成它，加载时可能会有加载指示器

标签： vue.js vuejs3 vue-i18n

【解决方案1】：

为了能够在您的应用程序中的任何位置使用 i18n（在我的例子中是 vue3）：

import i18n from "@/i18n";

i18n.global.t("your_key")

【讨论】：