nuxt-i18n 的延迟加载语言环境

【问题标题】：Lazy load locales for nuxt-i18nnuxt-i18n 的延迟加载语言环境
【发布时间】：2020-02-17 11:47:46
【问题描述】：

在 nuxt-i18n 中，您必须使用您的应用将支持的语言环境指定 locales 属性，如下所示：

  locales: [
    {
      code: 'en',
      file: 'en-US.js'
    },
    {
      code: 'es',
      file: 'es-ES.js'
    },
    {
      code: 'fr',
      file: 'fr-FR.js'
    }
  ],

这可能是从 api 端点获取然后填充数组吗？

我在这个问题https://github.com/nuxt-community/nuxt-i18n/issues/256#issuecomment-505344965 中看到过类似的东西，但我不知道如何运行该代码，甚至不知道有可能。

【问题讨论】：

标签： vue.js internationalization nuxt.js nuxt-i18n

【解决方案1】：

解决方案很简单。 Nuxt 允许您将异步函数作为选项导出，这样我就可以获取数据并将其分配给 i18n 对象。

https://nuxtjs.org/guide/configuration/#asynchronous-configuration

export default async () => {
  const data = await getCountries()

  const locales = []

  for (const locale of data) {
    locales.push({
      code: locale,
      file: `${locale}.json`
    })
  }

  return {
      build: {
          ...
      },
      env: {
          ...
      },
      modules: [
          'nuxt-i18n',
          ...
      ],
      i18n: {
          locales,
          strategy: 'prefix',
          detectBrowserLanguage: false,
          lazy: true,
          defaultLocale: 'es',
          langDir: 'translations/'
      },
      ...
  }
}

【讨论】：