我在使用i18 n的框架Nuxt 3上遇到了一个问题（@nuxtjs/i18 n：^8.0.0-rc.5）
i18 n似乎工作得很好，除了浏览器语言检测。
问题是我在i18 n配置文件中启用了detectBrowserLanguage，但它并不像我预期的那样工作。你知道我的问题的根本原因吗？
请找到我的配置文件：
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
我尝试修改配置文件，例如使用“alwaysRedirect：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'。