20、《在线商店国际化与服务端渲染实战》

《在线商店国际化与服务端渲染实战》

1. 国际化（i18n）实现

在开发应用时，国际化是提升用户体验的重要一环。我们可以通过创建 createI18n 函数来实现国际化配置。

export async function createI18n (locale) {
  const { default: localeMessages } = await import(`../../i18n/locales/${locale}`)
  const messages = {
    [locale]: localeMessages,
  }
  const i18n = new VueI18n({
    locale,
    messages,
  })
  return i18n
}

上述代码使用 async/await 异步加载指定语言的消息文件，并创建 VueI18n 实例。当然，也可以使用 Promise 来实现相同的功能：

export function createI18n (locale) {
  return import(`../../i18n/locales/${locale}`)
    .then(module => {
      const localeMessages = module.default
      // ...
    })
}