Nuxt3与Nuxt I18n插件问题：浏览器语言检测失效及部署异常

问题1：浏览器语言偏好无法自动检测 #

原因 #

你当前使用prefix策略，且detectBrowserLanguage.redirectOn设为root，但prefix策略下根路径/不存在（所有有效路径均带语言前缀，如/en、/fr），导致插件的自动检测逻辑无触发场景，自然不会自动设置Cookie和切换语言。

规范修复方案 #

无需自定义客户端插件，调整detectBrowserLanguage配置，让检测逻辑在「访问无语言前缀的路径」时触发：

detectBrowserLanguage: {
  useCookie: true,
  cookieKey: 'i18n_lang',
  redirectOn: 'no prefix', // 改为该值，匹配无语言前缀的访问场景
  alwaysRedirect: true, // 确保首次访问时强制检测（可选，按需开启）
  fallbackLocale: 'en'
}

问题2：静态部署后根路径返回404 #

原因 #

使用prefix策略时，nuxi generate仅生成带语言前缀的静态文件（如/en/index.html、/fr/index.html），不会生成根路径的index.html。静态部署时无动态路由处理，访问/会因找不到对应文件返回404；而本地开发服务器有动态路由逻辑，所以能正常重定向。

正确解决方案 #

切换为prefix_and_default策略是合理选择：

• 该策略将默认语言（en）映射到根路径，nuxi generate会生成/index.html（对应en语言）和/fr/index.html
• 访问根路径时直接加载默认语言内容，同时浏览器语言检测逻辑可正常触发，根据用户偏好重定向到对应语言路径（非默认语言仍保留/fr前缀）

调整后的核心配置：

i18n: {
  defaultLocale: "en",
  strategy: "prefix_and_default", // 修改策略
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'i18n_lang',
    redirectOn: 'root', // 此时根路径存在，检测逻辑正常触发
    fallbackLocale: 'en'
  },
  // 其余配置保持不变
}

额外优化建议 #

• 移除自定义的launch.client.js插件，依赖@nuxtjs/i18n原生检测功能即可，避免自定义逻辑与插件原生逻辑冲突
• 若坚持使用prefix策略，需在部署服务器配置重定向规则（如Netlify的_redirects、Vercel的vercel.json），将/重定向到/en，同时确保服务器支持SPA路由

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