问 Vue3 vue-i18n延迟加载

我想在我的应用程序中实现单独语言的延迟加载，但是我并不真正理解这个例子。示例： 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-路由器加载语言，而是定义一种默认语言，它可以在用户设置中更改。

现在我必须在哪里以及如何加载函数"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