nuxt-i18n的延迟加载区域设置

Question

在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中看到了类似的东西，但我不知道如何运行代码，甚至不知道它是可能的。

Answer 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/'
      },
      ...
  }
}