Vue3 vue-i18n延迟加载
Vue3 vue-i18n延迟加载
提问于 2022-01-23 13:35:44
我想在我的应用程序中实现单独语言的延迟加载，但是我并不真正理解这个例子。示例：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
(pageTitle && pageTitle.meta) window.document.title = process.env.VUE_APP_DOMAIN_TITLE + ' | ' + t(pageTitle.meta.title)
next()
}回答 1
Stack Overflow用户
发布于 2022-06-20 09:42:11
为了能够从应用程序中的任何地方获得i18n翻译(在我的例子中是vue3)：
import i18n from "@/i18n";
i18n.global.t("your_key")
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70822596
复制相关文章
相似问题
腾讯云开发者
