Nuxt 3 i18n 从 API 获取语言环境

Question

我在 Nuxt 3 应用程序中遇到了一个问题，我想使用 i18n。我做了相当多的研究，但找不到任何有用的信息，因此我的问题来了。 我将 i18n 与 Prismic CMS 结合使用。 Locales 数组来自 Prismic API，我通过可组合项

useLocales

获取它。在

useLocales

内部，我还通过

useState

将其设置为全局状态并返回它。 成功获取后，我想用它填充 i18n 实例。就是这样的场景。 然而，很快我就意识到这并不像我想象的那么明显 - 到目前为止我的方法都不起作用。

这是我迄今为止尝试过的：

1. 直接在

   defineNuxtConfig

   内部进行 fetch 并将有效负载设置为

   locales

   键的值 - 显然这个不起作用，因为不可能在那里执行异步操作。

// Inside defineNuxtConfig
i18n: {
    ...
    locales: await useLocales(),
    defaultLocale: "en-pl",
    ...
},

2. 在自定义插件中进行获取并将有效负载设置为 $i18n 属性的

   locales

   键的值。有趣的是，它更新了

   locales

   （我可以使用

   usei18n

   可组合项看到它），但不影响路由系统：

export default defineNuxtPlugin(async ({ $i18n }) => {
    const locales = await useLocales();
    $i18n.locales = locales;
});

3. 以相同的方式在自定义插件中进行获取，而是创建 i18n 的新实例：

export default defineNuxtPlugin(async ({ vueApp }) => {
    const locales = await useLocales();
    const i18nInstance = createI18n({
        legacy: false,
        globalInjection: true,
        locale: "en-pl",
        locales: locales,
    });
    vueApp.use(i18nInstance);
});

在文档和社区渠道中，我所能看到的只是区域设置数据是硬编码的方法 - 我很难在网络上找到我的用例，这对我来说有点令人惊讶，因为它非常常见。

我真的希望有人能给我提示如何正确设置这些区域设置

Answer 1

为了从 api 获取语言环境消息，您可以使用 nuxt i18n 推荐的方法：

第一步：（设置lazy：true）

i18n: {
  locales: [
    {
      code: 'en',
      file: 'en-US.js'
    },
    {
      code: 'es',
      file: 'es-ES.js'
    },
    {
      code: 'fr',
      file: 'fr-FR.js'
    }
  ],
  lazy: true,
  langDir: 'lang/',
  defaultLocale: 'en'
}

然后解析从 api 获取的语言环境：

export default async (context, locale) => {
  return await Promise.resolve({
    welcome: 'Welcome'
  })
}

// or

export default {
  welcome: 'Welcome'
}

参考文档：链接