国际化
Nuxt 模板基于 @nuxtjs/i18n 的多语言支持。
国际化已通过 @nuxtjs/i18n 完整接入。模板内置中英文应用文案、保留语言
的导航,以及按语言拆分的 Nuxt Content 集合。
配置
app/config/i18n.nuxt.config.ts 会传给 nuxt.config.ts 的 i18n 配置:
| 配置 | 值 |
|---|---|
| 语言 | en(en-US、en-us.json)与 zh(zh-CN、zh-cn.json) |
| 语言包目录 | app/i18n/locales/ |
| 默认语言 | en |
| 路由策略 | prefix_except_default |
| 浏览器语言检测 | 关闭 |
因此英文地址是 /docs、/blog,中文地址是 /zh/docs、/zh/blog。模板不按
浏览器语言自动跳转,URL 的语义稳定且明确。
应用文案与链接
用 useI18n() 获取响应式语言状态与翻译函数:
<script setup lang="ts">
const { t, locale } = useI18n()
</script>
<template>
<h1>{{ t("home.hero.title") }}</h1>
<span>{{ locale }}</span>
</template>模板内使用 NuxtLinkLocale,脚本或中间件中使用 useLocalePath(),它们会在
跳转时保留当前前缀:
<NuxtLinkLocale to="/dashboard">{{ $t("nav.dashboard") }}</NuxtLinkLocale>不要硬编码 /zh,也不要用字符串拼接无意间去掉前缀。
内容国际化
Nuxt Content 使用独立集合,而不是 slug.zh.md 文件对:
| 集合 | 来源 |
|---|---|
docs_en / docs_zh | content/en/docs/** / content/zh/docs/** |
blog_en / blog_zh | content/en/blog/** / content/zh/blog/** |
legal_en / legal_zh | content/en/legal/** / content/zh/legal/** |
文档/博客页面和组合式函数会按当前语言选择集合。同一文章若有两种语言,建议在
两个目录中保持相同路径。文档侧栏仍由 docs-sidebar-config.ts 手工维护。
添加一种语言
注册语言
在 app/config/i18n.nuxt.config.ts 的 locales 数组加入 code、语言标签、
显示名称和语言包文件名。
添加应用文案
在 app/i18n/locales/ 创建对应 JSON。保持与 en-us.json 相同的键结构,
避免组件回退为原始键名。
扩展服务端语言映射
在 server/email/index.ts 的 messagesMap 导入新语言包,并搜索其他显式按
语言映射的配置。
添加本地化内容
创建该语言的 docs/blog/legal 目录,在 content.config.ts 新增集合,让内容
组合式函数选择它,并按需更新语言切换与手工文档导航。
验证
- 默认英文 URL 不带前缀,中文 URL 使用
/zh。 - 页头、页脚、认证、表单和校验提示均可切换语言。
- 站内链接保留当前语言。
- 文档、博客与法律页面查询正确集合。
- 联系邮件按请求语言渲染;若认证邮件也需双语,Better Auth 调用已显式传入语言。
- 日志中没有缺失翻译键或语言专属 404。
