@nuxtjs/i18n刷新后所选语言重置为默认语言问题排查

现有配置缺失语言持久化和全链路语言检测逻辑。本地开发环境存在HMR状态残留，切换语言后热更新不会清空内存里的语言配置，所以表现正常；部署后页面全量刷新时，服务端渲染阶段拿不到用户此前选择的语言标识，就会直接回退到配置的defaultLocale。

1. 补全i18n模块核心配置 #

在@nuxtjs/i18n的配置项中新增路由策略和浏览器语言检测配置，开启cookie持久化存储用户语言偏好：

[
 '@nuxtjs/i18n',
       {
           locales,
           defaultLocale,
           lazy: true,
           langDir: 'locales/',
           // 新增配置开始
           strategy: 'prefix_except_default', // 默认语言URL不带前缀，其余语言URL带/{langCode}前缀，刷新时可直接从URL识别语言
           detectBrowserLanguage: {
               useCookie: true,
               cookieKey: 'i18n_redirected',
               redirectOn: 'root',
               alwaysRedirect: false,
               cookieSecure: process.env.NODE_ENV === 'production'
           },
           // 新增配置结束
           vueI18n: {
               fallbackLocale: defaultLocale,
           },
       },
   ],
   ['~/.build/merge-and-compare-locales.js', { defaultLocale }],
]

如果不想让URL带语言前缀，把strategy改成no_prefix即可，但这种模式下必须依赖cookie存储语言标识，否则刷新时服务端无法识别用户语言选择。

2. 替换语言切换实现 #

不要直接调用$i18n.setLocale，该方法默认不会同步写入cookie、也不会触发路由更新，改用官方提供的路由跳转方式切换语言，自动完成状态同步、cookie写入、URL更新：

async changeLocale(code: string) {
  await this.$router.push(this.switchLocalePath(code))
}

如果确实不想触发路由跳转，在调用setLocale后手动写入对应cookie即可，cookie的key、过期时间、路径要和配置里的detectBrowserLanguage参数保持一致。

3. 部署环境排查 #

如果配置更新后部署仍然失效，检查反向代理（Nginx、CDN等）是否过滤了i18n_redirected这个cookie，确保请求能正常携带该cookie到服务端、响应头的Set-Cookie字段没有被拦截。

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