您可以在服务器端进行翻译并将其作为响应返回。nuxt i18n 模块选项中定义的区域消息已集成,因此您只需配置区域检测器即可。
对于服务器端翻译,您需要定义一个区域检测器。
Nuxt i18n 导出了 defineI18nLocaleDetector()
组合函数用于定义它。
以下是如何定义一个使用查询、cookie 和头部检测区域的检测器的示例:
// 根据查询、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 应用程序中直接定义的区域检测器配置示例:
export default defineNuxtConfig({
i18n: {
experimental: {
localeDetector: 'localeDetector.ts'
}
}
})
有关通过 defineI18nLocaleDetector()
定义的区域检测器函数的详细信息,请参见 这里。
useTranslation()
要在服务器端进行翻译,您需要调用 useTranslation()
。
示例:
// 您需要定义 `async` 事件处理程序
export default defineEventHandler(async event => {
// 调用 `useTranslation`,以便它返回翻译函数
const t = await useTranslation(event)
return {
// 调用带有区域消息键的翻译函数,
// 而且翻译函数有一些重载
hello: t('hello')
}
})