Nuxt 3 i18n浏览器语言检测功能失效问题排查求助

算力阿峰

2026-7-7

问题根因

你将detectBrowserLanguage配置在了i18n.config.ts（vue-i18n运行时配置文件）中，但@nuxtjs/i18n v8的detectBrowserLanguage属于nuxt模块级配置项，必须在nuxt.config.ts里设置。同时日志显示localeCodes: []，说明i18n模块未读取到你配置的语言列表，导致无法匹配浏览器返回的语言标签，最终 fallback 到默认的en-US。

解决方案

步骤1：修正`nuxt.config.ts`的i18n模块配置

将locales、defaultLocale、detectBrowserLanguage等模块级配置移到nuxt.config.ts中：

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'en', iso: 'en-US', name: 'English' },
      { code: 'fr', iso: 'fr-FR', name: 'Français' }
    ],
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root',
      // alwaysRedirect: true // 调试时可临时开启，强制检测
    },
    legacy: false // 启用composition模式
  }
})

步骤2：精简`i18n.config.ts`配置

保留vue-i18n运行时核心配置，移除模块级配置项：

export default defineI18nConfig(() => ({
  messages: {
    en: {
      welcome: "Welcome",
    },
    fr: {
      welcome: "Bienvenue",
    }
  },
  // 可选：支持地区降级匹配（如fr-FR自动匹配fr）
  localeMatcher: 'lookup'
}))