i18n 检测浏览器语言不起作用

Question

在 Nuxt 中将 i18n 的 detectorBrowserLanguage 用作模块时，我遇到了问题。即使我的浏览器设置为英语，我仍然看到西班牙语网站，并且我不知道如何使其工作。

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: { //msgs }, en: {//msgs}

此外，我有一个用于手动更改语言的组件，最好是更改语言。我根据 detectorBrowserLanguage 中的配置设置对其进行了更改。

<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>

我只希望解决这个错误，并且在这种情况下能够拥有英文页面，因为我的搜索栏是英文的......否则，它应该以西班牙语显示。

此外，在控制台中，我执行了命令：navigator.languages，并得到了以下响应：

navigator.语言 ['en']0: "en"长度: 1

Answer 1

如文档中所述，并非所有设置都在

i18n.config

下。

这应该适合你：

• nuxt.config.ts

i18n: {
    locales: ['en', 'es'],
    defaultLocale: 'es',
    detectBrowserLanguage: {
        useCookie: true,
        cookieKey: "i18n_redirected",
        alwaysRedirect: true,
        onlyOnRoot: true,
    },
    vueI18n: "./i18n.config.ts",
    // ...
}

• i18n.config.ts

export default defineI18nConfig(() => {
    legacy: false,
    locale: 'en',
    messages: {
        es: { //msgs },
        en: {//msgs}
    // ...
})