Guide

浏览器语言检测

检测用户浏览器的语言。

默认情况下,Nuxt i18n 模块通过检测用户的浏览器语言来尝试将用户重定向到他们首选的语言。这由 detectBrowserLanguage 选项控制。

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected',
      redirectOn: 'root' // 推荐
    }
  }
})
为了更好的 SEO,建议将 redirectOn 设置为 root(这是默认值)。设置后,语言检测仅在用户访问网站根路径 (/) 时进行。这允许爬虫访问请求的页面,而不是因为检测到的语言区域而被重定向。它还允许链接到特定语言区域的页面。

浏览器语言要么从 navigator 中检测(在客户端运行时),要么从 accept-language HTTP 头中检测。配置的 locales(或者在对象形式中指定的 locales language 和/或 code)与浏览器报告的语言区域进行匹配(例如 en-US,en;q=0.9,no;q=0.8)。如果没有完全匹配的语言区域,则将语言代码(- 前的字母)与配置的语言区域进行匹配。

为了防止用户每次访问应用时都被重定向,Nuxt i18n 模块 使用检测到的语言区域设置一个 cookie。您可以通过将 detectBrowserLanguage.cookieKey 选项设置为您想要的任何名称来更改 cookie 的名称,默认为 i18n_redirected

nuxt.config.ts
i18n: {
  detectBrowserLanguage: {
    useCookie: true,
    cookieKey: 'my_custom_cookie_name'
  }
}

如果您更愿意在每次用户访问应用时都将其重定向到浏览器语言,请通过将 detectBrowserLanguage.useCookie 设置为 false 来禁用 cookie。

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: false
    }
  }
})

要完全禁用浏览器语言检测功能,可以将 detectBrowserLanguage 设置为 false

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    // ...
    detectBrowserLanguage: false
  }
})

要在每次用户访问应用时重定向他们并保持其选择,启用 alwaysRedirect

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    // ...
    detectBrowserLanguage: {
      useCookie: true,
      alwaysRedirect: true
    }
  }
})

要在跨源环境中使用 cookie(例如在 iFrame 中),可以设置 cookieCrossOrigin: true。这将把 cookie 设置从 SameSite=Lax 更改为 SameSite=None; Secure

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    detectBrowserLanguage: {
      useCookie: true,
      cookieCrossOrigin: true
    }
  }
})