Nuxt 3 i18n多域名与prefix_except_default策略混合配置问题

针对你需要的部分语言用独立域名（无前缀）、部分语言用主域名路径前缀的场景，推荐两种方案，优先使用官方配置方案，复杂场景再考虑自定义中间件：

方案一：利用Nuxt I18n官方配置实现（最优） #

通过domainLocales、customRoutes和multipleDomains的组合配置，无需自定义路由结构，直接实现混合URL规则：

核心配置（nuxt.config.ts） #

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      {
        code: 'en-us',
        name: 'American English',
        domain: 'example.com',
        prefix: '/en-us' // 主域名下使用路径前缀
      },
      {
        code: 'de-de',
        name: 'German',
        domain: 'example.com',
        prefix: '/de-de'
      },
      {
        code: 'en-au',
        name: 'Australian English',
        domain: 'example.com.au',
        prefix: '' // 独立域名无前缀
      }
    ],
    defaultLocale: 'en-us',
    multipleDomains: true,
    customRoutes: 'config', // 启用配置文件中的自定义路由规则
    strategy: 'prefix_except_default',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_selected_locale',
      redirectOn: 'root', // 仅在根路径触发浏览器语言检测重定向
      fallbackLocale: 'en-us'
    }
  }
})

配置说明 #

• domainLocales会自动匹配访问的域名到对应语言，比如访问example.com.au时，自动绑定en-au语言，且URL无前缀；
• customRoutes: 'config'让每个locale的prefix配置生效，主域名下的语言会自动添加路径前缀；
• detectBrowserLanguage配置会在用户访问主域名根路径（example.com/）时，自动检测浏览器语言，重定向到对应前缀路径（比如德语环境重定向到/de-de），无匹配则回退到en-us。

方案二：自定义路由+全局中间件（复杂场景适配） #

如果官方配置无法满足特殊路由规则，可采用动态路由pages/_locale结合全局中间件的方式：

1. 路由结构 #

在pages目录下创建_locale文件夹，存放所有页面文件：

pages/
  _locale/
    index.vue       # 对应 /[locale]/
    about.vue       # 对应 /[locale]/about
  ...

2. 全局中间件（middleware/i18n.global.ts） #

export default defineNuxtRouteMiddleware((to, from) => {
  const i18n = useI18n()
  const host = useRequestHeaders().host || ''

  // 域名-语言映射表
  const domainLocaleMap: Record<string, string> = {
    'example.com.au': 'en-au',
    'example.com': 'en-us'
  }

  // 处理独立域名场景
  if (host in domainLocaleMap) {
    const targetLocale = domainLocaleMap[host]
    // 若独立域名下出现多余前缀，重定向到无前缀路径
    if (to.params.locale) {
      return navigateTo(to.path.replace(`/${to.params.locale}`, ''), { redirectCode: 301 })
    }
    // 设置当前语言
    if (i18n.locale.value !== targetLocale) {
      i18n.locale.value = targetLocale
    }
    return
  }

  // 处理主域名路径前缀场景
  const validLocales = ['en-us', 'de-de']
  const currentLocale = to.params.locale as string

  // 根路径重定向到检测到的语言或默认值
  if (!currentLocale) {
    const detectedLocale = i18n.detectBrowserLanguage()?.locale || 'en-us'
    return navigateTo(`/${detectedLocale}`, { redirectCode: 302 })
  }

  // 无效前缀重定向到默认语言
  if (!validLocales.includes(currentLocale)) {
    return navigateTo('/en-us', { redirectCode: 301 })
  }

  // 设置当前语言
  i18n.locale.value = currentLocale
})

方案说明 #

• 中间件会自动识别访问域名，匹配对应语言；
• 主域名根路径会触发浏览器语言检测，重定向到对应前缀路径；
• 支持自定义复杂路由规则，适合有特殊业务需求的场景。

首页重定向的关键保障 #

无论采用哪种方案，需确保：

1. 启用detectBrowserLanguage并设置redirectOn: 'root'（官方方案），或在中间件中处理根路径的重定向逻辑（自定义方案）；
2. 配置cookie保存用户已选择的语言，避免重复重定向；
3. SSR环境下通过useRequestHeaders().host正确获取访问域名，确保服务器端渲染时的语言匹配准确。

内容的提问来源于stack exchange，提问作者Irakli Shengelia