Nuxt 3中如何自动为i18n配置从Strapi获取的多语言选项？

Nuxt 3的defineNuxtConfig支持异步函数，这意味着你可以在配置阶段直接从Strapi拉取语言设置——插件运行时机太晚，无法修改i18n的核心配置，所以这是更合适的方案。

实现步骤 #

1. 将nuxt.config改为异步函数，在其中请求Strapi接口获取语言数据
2. 转换Strapi返回的数据格式，适配i18n模块要求的结构
3. 添加错误处理，避免接口异常导致Nuxt启动失败

修改后的配置代码 #

export default defineNuxtConfig(async () => {
  // 配置兜底的默认语言，防止Strapi接口请求失败
  let fallbackLocales = [
    { code: 'en', file: 'en.json' },
    { code: 'it', file: 'it.json' }
  ];
  let fallbackDefaultLocale = 'en';

  try {
    // 替换为你的Strapi实际接口地址，比如获取全局设置或语言列表的接口
    const response = await fetch('http://your-strapi-domain/api/global-settings?populate=locales');
    const strapiData = await response.json();

    // 从Strapi返回的数据中提取语言配置（根据你的实际数据结构调整）
    const strapiLocales = strapiData.data.attributes.locales;
    const defaultLocaleFromStrapi = strapiData.data.attributes.defaultLocale;

    // 转换为i18n需要的格式，对应assets/i18n下的语言文件
    const dynamicLocales = strapiLocales.map((lang: any) => ({
      code: lang.code,
      file: `${lang.code}.json`
    }));

    fallbackLocales = dynamicLocales;
    fallbackDefaultLocale = defaultLocaleFromStrapi;
  } catch (err) {
    console.error('从Strapi获取语言配置失败，使用兜底配置', err);
  }

  return {
    modules: [
      '@nuxtjs/i18n',
      '@nuxtjs/strapi'
    ],
    i18n: {
      strategy: 'prefix_except_default',
      locales: fallbackLocales,
      langDir: 'assets/i18n',
      defaultLocale: fallbackDefaultLocale,
    },
    strapi: {
      url: 'http://your-strapi-domain' // 配置你的Strapi服务器地址
    }
  };
});

注意事项 #

• 数据结构适配：上述代码假设Strapi返回的全局设置中包含locales数组和defaultLocale字段，你需要根据自己的Strapi数据模型调整提取逻辑。
• 开发/生产差异：开发模式下每次启动Nuxt都会重新请求Strapi；生产模式下仅在构建时获取一次配置，若需动态更新语言设置，可结合服务器端中间件在请求时重新拉取（但不推荐频繁变动语言配置）。

内容的提问来源于stack exchange，提问作者Marco Sandri