NuxSaaS 的国际化（i18n）

本文档解释了 NuxSaaS 如何实现多语言支持，以及其背后的设计理念。

NuxSaaS 如何设置多语言支持

NuxSaaS 使用 @nuxtjs/i18n 模块为应用提供国际化支持。主要配置在 nuxt.config.ts 和 app/i18n/i18n.config.ts 文件中进行管理。

关键配置点

• 语言定义：
  支持的语言在 nuxt.config.ts 的 locales 数组中定义。每个语言项包含代码、ISO 标识符和显示名称。例如：

  const locales = [
    { code: 'en', iso: 'en-US', name: 'English' },
    { code: 'zh-CN', iso: 'zh-CN', name: '简体中文' },
    { code: 'ja', iso: 'ja-JP', name: '日本語' },
    { code: 'fr', iso: 'fr-FR', name: 'Français' }
  ]

• 默认与回退语言：
  英语（en）被设置为默认语言。为提升用户体验，关闭了回退和缺失翻译的警告提示。

• 消息组织：
  所有全局翻译消息都组织在 app/i18n/ 目录下。主配置文件 i18n.config.ts 会为每种语言合并全局翻译和校验消息（如 Zod 校验错误）：

  const messages = {
    'en': { ...zodEn, ...global.en },
    'zh-CN': { ...zodZhCN, ...global['zh-CN'] },
    'ja': { ...zodJa, ...global.ja },
    'fr': { ...zodFr, ...global.fr }
  }

• 页面和组件级翻译：
  对于复杂页面或组件，可以通过 <i18n src="./i18n.json"></i18n> 块进行作用域翻译，实现模块化和易维护的翻译文件。

• 多语言路由支持：
  应用采用多语言路由，URL 会反映所选语言（如 /ja/、/zh-CN/）。使用 useLocalePath() 组合式函数生成正确的链接。

• 添加新语言：

  添加新语言的步骤：

  1. 在 nuxt.config.ts 的 locales 数组中添加新语言。
  2. 在 app/i18n/ 目录下创建或更新新语言的翻译文件。
  3. 更新所有 i18n.json 文件，包含新语言的翻译内容。

  在 VS Code 中搜索 "en": {：

为什么采用这种方式？

• 可扩展性：按语言和功能组织翻译，项目可以轻松扩展支持更多语言和贡献者。
• 可维护性：集中配置和模块化翻译文件，便于更新或添加翻译，不影响应用其他部分。
• 用户体验：多语言路由和无缝切换语言，为全球用户提供一致且直观的体验。
• 校验一致性：集成校验消息（如 Zod），确保所有用户提示均已本地化，提升可访问性和专业性。
• 性能：仅加载必要的翻译文件，保证应用高效运行。