国际化

Nuxt 模板基于 @nuxtjs/i18n 的多语言支持。

国际化已通过 @nuxtjs/i18n 完整接入。模板内置中英文应用文案、保留语言 的导航,以及按语言拆分的 Nuxt Content 集合。

配置

app/config/i18n.nuxt.config.ts 会传给 nuxt.config.tsi18n 配置:

配置
语言enen-USen-us.json)与 zhzh-CNzh-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_zhcontent/en/docs/** / content/zh/docs/**
blog_en / blog_zhcontent/en/blog/** / content/zh/blog/**
legal_en / legal_zhcontent/en/legal/** / content/zh/legal/**

文档/博客页面和组合式函数会按当前语言选择集合。同一文章若有两种语言,建议在 两个目录中保持相同路径。文档侧栏仍由 docs-sidebar-config.ts 手工维护。

添加一种语言

注册语言

app/config/i18n.nuxt.config.tslocales 数组加入 code、语言标签、 显示名称和语言包文件名。

添加应用文案

app/i18n/locales/ 创建对应 JSON。保持与 en-us.json 相同的键结构, 避免组件回退为原始键名。

扩展服务端语言映射

server/email/index.tsmessagesMap 导入新语言包,并搜索其他显式按 语言映射的配置。

添加本地化内容

创建该语言的 docs/blog/legal 目录,在 content.config.ts 新增集合,让内容 组合式函数选择它,并按需更新语言切换与手工文档导航。

验证

  • 默认英文 URL 不带前缀,中文 URL 使用 /zh
  • 页头、页脚、认证、表单和校验提示均可切换语言。
  • 站内链接保留当前语言。
  • 文档、博客与法律页面查询正确集合。
  • 联系邮件按请求语言渲染;若认证邮件也需双语,Better Auth 调用已显式传入语言。
  • 日志中没有缺失翻译键或语言专属 404。

相关页面

On this page