如何基于浏览器检测配置Nuxt/i18n默认语言及语言持久化

你的配置存在几个关键问题导致功能失效：

• 注释了locales、defaultLocale等核心配置，i18n无法识别可用语言选项
• i18n.config.ts硬编码locale: "en"，会覆盖浏览器检测结果和用户切换的语言设置
• detectBrowserLanguage未禁用alwaysRedirect，用户切换语言后导航时可能被强制切回浏览器默认语言

以下是修复后的完整配置，完美实现你的需求：

1. 更新 nuxt.config.ts #

modules: ["@nuxtjs/i18n"],
i18n: {
    vueI18n: "./i18n.config.ts",
    strategy: "no_prefix", // 采用无URL前缀的语言策略
    defaultLocale: "en", // 默认语言设为英语
    locales: [
        { code: "en", file: "en.json", name: "English" },
        { code: "it", file: "it.json", name: "Italian" },
    ],
    langDir: "locales/", // 指定语言文件存放目录
    lazy: true, // 懒加载语言文件，优化首屏性能
    detectBrowserLanguage: {
        useCookie: true,
        cookieKey: "nuxt_i18n_locale", // 自定义cookie键名，避免冲突
        redirectOn: "root", // 仅在访问根路径时检测浏览器语言并重定向
        alwaysRedirect: false, // 禁止用户切换语言后自动重定向
        cookieSecure: process.env.NODE_ENV === "production", // 生产环境启用HTTPS cookie
        cookieHttpOnly: false, // 允许前端读取cookie
        cookieMaxAge: 365 * 24 * 60 * 60, // Cookie有效期设为1年
    },
    // 配置用户语言选择的持久化cookie
    cookie: {
        prefix: 'nuxt-i18n_',
        name: 'locale',
        expiration: 365 * 24 * 60 * 60,
        sameSite: 'lax'
    }
},

2. 调整 i18n.config.ts #

import en from "@/locales/en.json";
import it from "@/locales/it.json";

export default defineI18nConfig(({ app }) => {
    // 优先从cookie读取用户保存的语言，没有则用默认语言
    const savedLocale = app.$cookies.get('nuxt_i18n_locale') || 'en';
    
    return {
        legacy: false,
        locale: savedLocale, // 动态设置初始语言
        fallbackLocale: "en", // 当目标语言不存在时回退到英语
        messages: { en, it },
    };
});

3. 实现语言切换组件 #

在需要切换语言的组件中添加以下代码，确保切换时同时更新locale和cookie：

<template>
  <div class="language-switcher">
    <button @click="switchLocale('en')">English</button>
    <button @click="switchLocale('it')">Italiano</button>
  </div>
</template>

<script setup>
const { locale } = useI18n();
// 绑定cookie，设置有效期1年
const localeCookie = useCookie('nuxt_i18n_locale', { maxAge: 365 * 24 * 60 * 60 });

const switchLocale = (newLocale: string) => {
  locale.value = newLocale;
  // 更新cookie保存用户选择
  localeCookie.value = newLocale;
};
</script>

关键配置说明 #

• 恢复核心语言配置：让i18n正确识别可用语言并懒加载对应翻译文件
• 禁用alwaysRedirect：避免用户手动切换语言后，导航时被强制切回浏览器默认语言
• 动态读取cookie设置初始语言：确保用户再次访问时自动加载上次选择的语言
• 切换语言时同步更新cookie：保证页面导航过程中语言设置不丢失

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