VueI18n区域设置消息加载问题

Question

我在应用程序中安装了用于语言本地化的vueI18n包，通过api调用获取locale对象。我有一个配置文件，其中指定了默认语言，并且在创建app.vue之前将基于该配置文件加载区域设置。我正在beforeCreate生命周期方法中加载区域设置。但文本仍然没有正确加载。

最初消息对象是空的，因为基于用户配置，我们获取语言并加载消息。我假设初始的空对象是导致问题的原因。

是否有人建议我们可以延迟页面加载，直到确认消息对象已成功加载。

vueI18配置文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import userConfig from './userConfig'
import apiService from '@/service/apiService.js'

let selectedLanguage = ''
Vue.use(VueI18n)

const loadLocaleMessages = async (lang) => {
  const messages = await apiService.getLocale(lang)
  return messages
}

export const i18n = new VueI18n({
  locale: selectedLanguage,
  fallbackLocale: userConfig.defaultLocalizationKey,
  formatFallbackMessages: true,
  messages: {}
})

export const loadLanguage = async lang => {
  const messages = await loadLocaleMessages(lang)
  selectedLanguage = lang
  return i18n.setLocaleMessage(selectedLanguage, messages[lang])
}

App.vue

  async beforeCreate () {
    await loadLanguage(this.$userConfig.defaultLocalizationKey)
    this.$i18n.locale = this.$userConfig.defaultLocalizationKey
  }

Answer 1

好的做法是在vue-i18n中始终使用默认/后备语言，例如英语。如果您由于任何原因不能这样做，那么您可以简单地将一个v-if放在应用程序的模板上，这样在您将至少一种语言导入到vue-i18n之前，就不会呈现任何内容。