Guide

服务器端翻译

在服务器端进行翻译并作为响应返回。

您可以在服务器端进行翻译并将其作为响应返回。在 nuxt i18n 模块选项中定义的区域设置消息已集成,因此您只需配置区域设置检测器即可。

此功能为实验性功能, 从 v8 RC8 开始支持。

定义区域设置检测器

对于服务器端翻译,您需要定义一个区域设置检测器。

Nuxt i18n 导出 defineI18nLocaleDetector 组合函数来定义它。

以下是如何定义一个使用查询、cookie 和头部检测区域设置的检测器的示例:

localeDetector.ts
// 根据查询、cookie、头部进行检测
export default defineI18nLocaleDetector((event, config) => {
  // 尝试从查询中获取区域设置
  const query = tryQueryLocale(event, { lang: '' }) // 使用 `lang` 选项禁用区域设置默认值
  if (query) {
    return query.toString()
  }

  // 尝试从 cookie 中获取区域设置
  const cookie = tryCookieLocale(event, { lang: '', name: 'i18n_locale' }) // 使用 `lang` 选项禁用区域设置默认值
  if (cookie) {
    return cookie.toString()
  }

  // 尝试从头部 (`accept-header`) 中获取区域设置
  const header = tryHeaderLocale(event, { lang: '' }) // 使用 `lang` 选项禁用区域设置默认值
  if (header) {
    return header.toString()
  }

  // 如果到目前为止无法解析区域设置,则使用传递给函数的区域设置配置中的 `defaultLocale` 值进行解析
  return config.defaultLocale
})

区域设置检测器函数用于检测服务器端的区域设置。它在服务器上每次请求时调用。

当您定义区域设置检测器时,需要将区域设置检测器的路径传递给 experimental.localeDetector 选项。

以下是直接在 Nuxt 应用程序中定义的区域设置检测器配置的示例:

nuxt.config.ts
export default defineNuxtConfig({
  i18n: {
    experimental: {
      localeDetector: './localeDetector.ts'
    }
  }
})

有关由 defineI18nLocaleDetector 定义的区域设置检测器函数的详细信息,请参见 此处

useTranslation 在 eventHandler 中

要在服务器端进行翻译,您需要调用 useTranslation

示例:

// 您需要定义 `async` 事件处理程序
export default defineEventHandler(async event => {
  // 调用 `useTranslation`,以返回翻译函数
  const t = await useTranslation(event)
  return {
    // 使用区域设置消息的键调用翻译函数,
    // 并且翻译函数具有一些重载
    hello: t('hello')
  }
})
对于翻译函数的键,您可以指定在 nuxt.config 中的 nuxt-i18n 选项中设置的区域设置消息或在 i18n.config 消息中加载的区域设置。