如何在 nuxt-i18n 中使用服务端提供的语言包

版本信息

{
	"nuxt-i18n": "^6.28.1",
	"nuxt-i18n": "^6.28.1",
	"vue-i18n": "^8.26.7"
}

基本逻辑

nuxt-i18n 底层使用的 vue-i18n
vue-i18n 提供了 setLocaleMessage ，允许运行时动态设置语言包

nuxt-i18n 提供了钩子：onBeforeLanguageSwitch

onBeforeLanguageSwitch 在切换语言时触发，这时候可以通过服务端获取对应的语言包然后使用 setLocaleMessage 进行设置即可

示例代码

plugins/i18n.js

async function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function fetchMessages() {
  console.log('fetch messages...')

  await sleep(3000)

  console.log('message getted')

  return {
    "message": "Message from api"
  }
}

export default function ({ app }) {
  // beforeLanguageSwitch called right before setting a new locale
  app.i18n.onBeforeLanguageSwitch = async (oldLocale, newLocale, isInitialSetup, context) => {
    console.log(oldLocale, newLocale, isInitialSetup)

    if(newLocale === 'zh') {
      const messages = app.i18n.getLocaleMessage('zh')
      console.log('message', messages)


      const newMessages = await fetchMessages()
      app.i18n.setLocaleMessage('zh', newMessages)
    }
  }
}

相关文档

setLocaleMessage
beforeLanguageSwitch