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