Vue.js Nuxt 3 I18N浏览器检测不起作用

我在使用i18n(@nuxtjs/i18n:^8.0.0-rc.5)的框架Nuxt3上遇到了一个问题

除了浏览器语言检测之外，i18n似乎工作得很好.

问题是我在i18n配置文件中启用了检测到的BrowserLanguage，但它不能像我预期的那样工作. 你知道我问题的根本原因吗？

请找到我的配置文件:

I18n.config.ts

export default defineI18nConfig(() => ({
    legacy: false,
    locales: [
        { code: 'en', iso: 'en-US' },
        { code: 'fr', iso: 'fr-FR' }
    ],
    defaultLocale: 'en',
    // strategy: 'no_prefix',
    detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        redirectOn: 'root',
        // alwaysRedirect: true
    },
    messages: {
        en: {
            welcome: "Welcome",
        },
        fr: {
            welcome: "Bienvenue",
        }
    }
}))

请注意，翻译工作正常，手动更改语言的下拉列表也工作得很好.

找到以下代码:

<template>
    <div class="relative mr-4">
        <button @click="toggle" @focusout="closeDropdown"
            class="border-4 border-secondary bg-primary2 bg-opacity-80 hover:border-accent rounded-lg py-2 pl-4 pr-2 flex flex-row group gap-2">
            <Icon :name="langFlag" size="2em" />
            <Icon name="mdi:chevron-down" class="text-secondary group-hover:text-accent" size="2em" />
        </button>
        <div v-if="ddactive"
            class="absolute top-14 right-0 bg-primary2 bg-opacity-80 flex flex-col rounded-lg z-40 overflow-hidden text-secondary">
            <button
                class="btnlang px-4 py-2 flex flex-row items-center border-4 border-b-2 border-secondary hover:border-accent hover:text-accent"
                @click="changeLangTo('en')">
                <Icon name="flag:gb-4x3" size="2em" />
                <span class="pl-2">English</span>
            </button>
            <button
                class="btnlang px-4 py-2 flex flex-row items-center border-4 border-t-2 border-secondary hover:border-accent hover:text-accent"
                @click="changeLangTo('fr')">
                <Icon name="flag:fr-4x3" size="2em" />
                <span class="pl-2">Français</span>
            </button>
        </div>
    </div>
</template>
  
<script setup>

const { locale, locales, setLocale } = useI18n()
const ddactive = ref(false)
const toggle = () => ddactive.value = !ddactive.value

const closeDropdown = (e) => {
    if (!e.relatedTarget || !e.relatedTarget.className || !e.relatedTarget.className.includes("btnlang")) {
        ddactive.value = false
    }
}

const langFlag = ref('flag:gb-4x3')

const changeLangTo = (lang) => {
    setLocale(lang)
    switch (lang) {
        case 'en':
            langFlag.value = 'flag:gb-4x3'
            break;
        case 'fr':
            langFlag.value = 'flag:fr-4x3'
            break;
    }
    ddactive.value = false
}

onMounted(() => {
    console.log(locale.value);
    changeLangTo(locale.value);
})

</script>

下面是我的浏览器(Chrome)的屏幕截图，区域设置为"fr-FR"，但上面代码的"console.log(locale.value)；"仍然显示"en-US":

enter image description here个

例如，我try 使用"always sReDirect:True"来修改配置文件，但这不会改变结果.

编辑:

我通过将debug="true"添加到模块@nuxtjs/i18 n的配置文件中来完成我的代码:

load $i18n type definition plugin for composition mode
isSSG false
definePageMeta() is a compiler-hint helper that is only usable inside the script block of a single file component which is also a page. Its arguments should be compiled away and passing it at runtime has no effect.
useCookie on setup true
defaultLocale on setup 
detectLocale: initialLocale - en-US
detectLocale: (ssg, callType, firstAccess) -  normal setup true
detectBrowserLanguage: (ssg, callType, firstAccess) -  normal setup true
detectBrowserLanguage: (path, strategy, alwaysRedirect, redirectOn, locale) - / prefix_except_default false root en-US
getLocaleCookie { useCookie: true, cookieKey: 'i18n_redirected', localeCodes: [] }
detectBrowserLanguage: cookieLocale undefined
getBrowserLocale accept-language { 'accept-language': 'fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7' }
getBrowserLocale ret 
detectBrowserLanguage: browserLocale
detectBrowserLanguage: (matchedLocale, cookieLocale, localeFrom) -  undefined navigator_or_header
detectBrowserLanguage: first finaleLocale (finaleLocale, cookieLocale, localeFrom) -  undefined navigator_or_header
detectBrowserLanguage: vueI18nLocale en-US
detectLocale: detectBrowserLanguage (browserLocale, stat, reason, from) -  false not_found_match undefined
detectLocale: finaleLocale first (finaleLocale, strategy) -  prefix_except_default
detectLocale: finaleLocale second (finaleLocale, detectBrowserLanguage) -  {
  alwaysRedirect: false,
  cookieCrossOrigin: false,
  cookieDomain: null,
  cookieKey: 'i18n_redirected',
  cookieSecure: false,
  fallbackLocale: '',
  redirectOn: 'root',
  useCookie: true
}
getLocaleCookie { useCookie: true, cookieKey: 'i18n_redirected', localeCodes: [] }
detectLocale: finalLocale last (finalLocale, defaultLocale) -
detectLocale: finalLocale -
first detect initial locale
final initial locale: en-US
locale-changing middleware {
  fullPath: '/',
  hash: '',
  query: {},
  name: 'index',
  path: '/',
  params: {},
  matched: [
    {
      path: '/',
      redirect: undefined,
      name: 'index',
      meta: {},
      aliasOf: undefined,
      beforeEnter: undefined,
      props: [Object],
      children: [],
      instances: {},
      leaveGuards: Set(0) {},
      updateGuards: Set(0) {},
      enterCallbacks: {},
      components: [Object]
    }
  ],
  meta: {},
  redirectedFrom: undefined,
  href: '/'
} {
  fullPath: '/',
  path: '/',
  query: {},
  hash: '',
  name: 'index',
  params: {},
  matched: [
    {
      path: '/',
      redirect: undefined,
      name: 'index',
      meta: {},
      aliasOf: undefined,
      beforeEnter: undefined,
      props: [Object],
      children: [],
      instances: {},
      leaveGuards: Set(0) {},
      updateGuards: Set(0) {},
      enterCallbacks: {},
      components: [Object]
    }
  ],
  meta: {},
  redirectedFrom: undefined,
  href: '/'
}

我们可以看到，浏览器区域设置似乎以某种方式很好地检测到了"getBrowserLocale Accept-Language{‘Accept-Language’:‘fr-FR，fr；q=0.9，en-US；q=0.8，en；q=0.7’}"，但最终得到的区域设置是‘en-US’.