Nuxt中i18n的detectBrowserLanguage功能失效问题求助

问题情况 #

在Nuxt项目中使用@nuxtjs/i18n的detectBrowserLanguage功能时，浏览器语言已设置为英文（控制台执行navigator.languages返回['en']），但网站仍默认显示西班牙语。已配置nuxt.config、i18n.config及手动切换语言组件，需要修复自动检测失效问题，让网站按浏览器语言自动切换。

现有配置代码 #

nuxt.config #

modules: ["@nuxtjs/tailwindcss", "@nuxtjs/i18n"],
i18n: {
  vueI18n: "./i18n.config.ts",
},

i18n.config #

export default defineI18nConfig(() => ({
  locale: "es",
  fallbackLocale: "es",
  legacy: false,
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: "i18n_redirected",
    alwaysRedirect: true,
    onlyOnRoot: true,
  },
  fallbackWarn: false,
  missingWarn: false,
  warnHtmlMessage: false,
  messages: {
    es: { /* 西班牙语文案 */ }, 
    en: { /* 英语文案 */ }
  }
}))

语言切换组件 #

<script>
import SDropdown from "~/Components/utils/SDropdown.vue";

export default {
  data() {
    return {
      currentLanguage: this.$i18n.locale,
      detectedLanguage: this.$i18n.locale,
      supportedLanguagesFlagIcons: {
        es: "/assets/icons/ES.svg",
        en: "/assets/icons/en.svg",
      },
    };
  },
  components: {
    SDropdown,
  },
  methods: {
    setLanguage(languageCode) {
      this.$i18n.locale = languageCode;
      this.currentLanguage = languageCode;
    },
  },
  mounted() {
    this.detectedLanguage = this.$i18n.locale;
    this.currentLanguage = this.$i18n.locale;
  },
};
</script>
<template>
  <SDropdown align="right" width="48">
    <template #trigger>
      <button
        class="inline-flex text-sm border-transparent rounded-full focus:outline-none focus:border-gray-300 transition"
      ></button>

      <span class="inline-flex rounded-md">
        <button
          type="button"
          class="inline-flex items-center text-xl no-underline py-2 px-4 navLink leading-4 transition capitalize"
        >
          <img
            class="w-10"
            :src="supportedLanguagesFlagIcons[currentLanguage]"
            :alt="$t(currentLanguage)"
          />
          <svg
            class="ml-2 -mr-0.5 h-4 w-4"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </span>
    </template>
    <template #content>
      <a
        href="#"
        class="block px-3 py-2 text-sm text-gray-700 no-underline navLink"
        @click.prevent="setLanguage('es')"
      >
        <img
          class="w-8 inline-block mr-2"
          :src="supportedLanguagesFlagIcons.es"
        />
        Español
      </a>
      <a
        href="#"
        class="block px-3 py-2 text-sm text-gray-700 no-underline navLink"
        @click.prevent="setLanguage('en')"
      >
        <img
          class="w-8 inline-block mr-2"
          :src="supportedLanguagesFlagIcons.en"
        />
        English
      </a>
    </template>
  </SDropdown>
</template>

解决方案 #

1. 修正i18n配置中的检测逻辑与语言声明 #

问题出在两个核心点：

• 未显式声明支持的语言列表，i18n无法确认哪些语言可以匹配浏览器检测结果
• alwaysRedirect: true会强制重定向，但如果之前存在i18n_redirected cookie，会直接跳过检测逻辑

修改后的i18n.config：

export default defineI18nConfig(() => ({
  locale: "es",
  fallbackLocale: "es",
  legacy: false,
  // 新增：明确声明支持的语言，让i18n知道哪些语言可匹配
  locales: [
    { code: 'es', name: 'Español' },
    { code: 'en', name: 'English' }
  ],
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: "i18n_redirected",
    // 修改为false：仅当没有语言选择缓存时才执行检测重定向
    alwaysRedirect: false,
    onlyOnRoot: true,
    // 明确指定仅在根路径触发检测
    redirectOn: 'root'
  },
  fallbackWarn: false,
  missingWarn: false,
  warnHtmlMessage: false,
  messages: {
    es: { /* 西班牙语文案 */ },
    en: { /* 英语文案 */ }
  }
}))

2. 修复语言切换组件的响应式问题 #

由于legacy: false，this.$i18n.locale是一个Ref对象，直接赋值无法实现响应式，改用计算属性获取状态，同时使用官方推荐的setLocale方法切换语言：

修改后的语言切换组件：

<script>
import SDropdown from "~/Components/utils/SDropdown.vue";

export default {
  components: {
    SDropdown,
  },
  // 用计算属性实现响应式语言状态同步
  computed: {
    currentLanguage() {
      return this.$i18n.locale.value;
    }
  },
  data() {
    return {
      supportedLanguagesFlagIcons: {
        es: "/assets/icons/ES.svg",
        en: "/assets/icons/en.svg",
      },
    };
  },
  methods: {
    // 使用async/await配合setLocale方法，确保语言切换流程完成
    async setLanguage(languageCode) {
      await this.$i18n.setLocale(languageCode);
    },
  },
};
</script>
<template>
  <SDropdown align="right" width="48">
    <template #trigger>
      <span class="inline-flex rounded-md">
        <button
          type="button"
          class="inline-flex items-center text-xl no-underline py-2 px-4 navLink leading-4 transition capitalize"
        >
          <img
            class="w-10"
            :src="supportedLanguagesFlagIcons[currentLanguage]"
            :alt="$t(currentLanguage)"
          />
          <svg
            class="ml-2 -mr-0.5 h-4 w-4"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            />
          </svg>
        </button>
      </span>
    </template>
    <template #content>
      <a
        href="#"
        class="block px-3 py-2 text-sm text-gray-700 no-underline navLink"
        @click.prevent="setLanguage('es')"
      >
        <img
          class="w-8 inline-block mr-2"
          :src="supportedLanguagesFlagIcons.es"
        />
        Español
      </a>
      <a
        href="#"
        class="block px-3 py-2 text-sm text-gray-700 no-underline navLink"
        @click.prevent="setLanguage('en')"
      >
        <img
          class="w-8 inline-block mr-2"
          :src="supportedLanguagesFlagIcons.en"
        />
        English
      </a>
    </template>
  </SDropdown>
</template>

3. 测试验证步骤 #

• 清除浏览器中名为i18n_redirected的cookie（避免之前的语言选择缓存干扰检测）
• 重启Nuxt开发服务器
• 访问网站根路径，此时网站会自动匹配浏览器的英文语言，切换到英文显示

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