在加载路由之前加载 vue-i18n 消息

Question

我正在尝试使用 vue-i18n 制作可翻译路线。

我希望它的工作方式是 JSON 文件将对特定路由 URL 进行翻译。

例如{ 'home_url': 'Home' } 然后在我的路线中，我会使用这样的东西：

export default [
  { path: i18n.t('home_url'), name: 'home', component: Home }
]

问题是在导入 i18n 消息之前加载了路由。

有什么方法可以延迟路由加载，直到 i18n 准备好？

这是我加载翻译的方式：

import Vue from 'vue'
import store from '~/store'
import VueI18n from 'vue-i18n'
import axios from 'axios'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {}
})

/**
 * @param {String} locale
 */
export async function loadMessages (locale) {
  if (Object.keys(i18n.getLocaleMessage(locale)).length === 0) {
    const messages = await import(/* webpackChunkName: "lang-[request]" */ `~/lang/${locale}`)
    i18n.setLocaleMessage(locale, messages)
  }

  if (i18n.locale !== locale) {
    i18n.locale = locale
    axios.defaults.headers.common['Accept-Language'] = locale
    document.querySelector('html').setAttribute('lang', locale)
  }
}

;(async function () {
  await loadMessages(store.getters['lang/locale'])
})()

export default i18n

Answer 1

import(/* webpackChunkName: "lang-[request]" */ `~/lang/${locale}`) 是一个 Webpack 异步导入，所以它会在你的主应用程序脚本加载后加载，而不是同时加载。

我会推荐两种解决方案（选择更适合您的一种）：

删除您的 loadMessages 函数并同步加载所有 Json-s。应用程序包会增长（所有翻译都在里面）但它会在应用程序启动时加载它们。
延迟路由器创建 (router = new Router(...))，直到加载所有语言环境（loadMessages 完成）。

在加载路由之前加载 vue-i18n 消息

Load vue-i18n messages before routes are loaded

vue.js

vue-router

vue-i18n