我在使用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'。
1条答案
按热度按时间fafcakar1#
我花了一个星期的时间试图弄明白我错在哪里,而我只是误读了文档!无论如何,我希望我能帮助其他可能面临这个问题的人:
这段配置应该在nuxt.config.ts文件中,而不是在i18n.config.ts中:
字符串