Nuxtjs/i18n禁用浏览器语言检测，如何实现无闪烁Cookie语言处理？

问题根源 #

你当前在app.vue的客户端setup()中调用setLocale，本质是服务器端先用默认语言完成渲染，客户端hydrate后才切换到Cookie存储的语言，这就导致了用户可见的闪烁现象。要解决这个问题，必须在服务器端请求阶段就确定并设置Locale，让SSR直接输出对应语言的页面内容。

正确实现方案 #

1. 配置Nuxt i18n基础参数 #

修改nuxt.config.ts，关闭浏览器语言检测，统一Cookie名称，明确默认语言与支持的语言列表：

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'bs',
    locales: [
      { code: 'bs', name: 'Bosnian' },
      // 添加其他支持的语言，比如 { code: 'en', name: 'English' }
    ],
    detectBrowserLanguage: false, // 强制关闭浏览器语言检测
    strategy: 'prefix_except_default', // 根据需求选择路由策略，此选项默认语言无前缀
    cookie: {
      name: 'alprom_language', // 和你使用的Cookie名称保持一致
    },
  },
})

2. 创建服务器端中间件 #

新建middleware/i18n.server.ts（.server.ts后缀确保仅在服务器端执行），在请求进入时直接从Cookie读取语言并设置Locale：

export default defineNuxtRouteMiddleware(async (to, from) => {
  const i18n = useI18n()
  const languageCookie = useCookie('alprom_language')

  // 如果Cookie存在且当前Locale不匹配，立即切换
  if (languageCookie.value && i18n.locale.value !== languageCookie.value) {
    await i18n.setLocale(languageCookie.value)
  }
})

将该中间件设置为全局生效（在nuxt.config.ts中添加）：

export default defineNuxtConfig({
  // ...其他配置
  middleware: ['i18n'],
})

3. 客户端语言切换逻辑 #

在客户端切换语言时，同步更新Cookie确保下次加载生效：

const changeLocale = async (newLocale: string) => {
  const { setLocale } = useI18n()
  const languageCookie = useCookie('alprom_language')

  await setLocale(newLocale)
  languageCookie.value = newLocale
}

4. 清理冗余代码 #

删除app.vue中原来的setLocale代码，因为服务器端已经完成Locale设置，客户端会自动继承SSR的Locale状态。

关键注意点 #

• 必须使用服务器端中间件：只有在SSR阶段设置Locale，才能避免客户端二次切换的闪烁。
• setLocale是异步函数：中间件中必须加await，确保Locale设置完成后再渲染页面。
• 统一Cookie名称：Nuxt i18n配置中的cookie.name要和业务代码中使用的一致，避免读取混乱。

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