国际化与本地化实战指南
High Contrast
Dark Mode
Light Mode
Sepia
Forest
9 min read1,815 words

国际化与本地化实战指南

i18n Mastery: Internationalization, Localization, and Multi-Region Deployment

把产品推向全球市场,不只是"把文字换成另一种语言"那么简单。日期格式、数字千分位、货币符号、复数规则、从右到左的阿拉伯文布局、hreflang 标签、CDN 地理路由——每一个细节都可能成为用户流失的隐患。

本书从 Unicode 编码基础讲起,覆盖 Web 前端(React/Next.js/Vue)、后端 API、翻译工作流、RTL 语言支持,一直到多区域部署的域名策略和 SEO 本地化,帮你建立完整的 i18n 工程体系。


适合哪些读者

角色 收获
前端 / 全栈开发者 掌握 react-intl、next-i18next、vue-i18n 配置与最佳实践
后端开发者 设计支持多语言的 API 响应、数据库字段和错误信息
产品经理 / 运营 理解翻译工作流选型、TMS 平台对比,以及多区域 SEO 策略
技术型创业者 从零搭建支持全球化的产品技术架构

建议先读:有基础编程经验(HTML/CSS/JavaScript);了解 web-commerce-ops-guide 第 12 章(多市场运营)提供业务背景。


全书章节

graph LR A[01\nUnicode & locale 基础] --> B[02\nWeb 前端框架实战] B --> C[03\n后端 API 多语言设计] C --> D[04\n数字 / 日期 / 货币 / 复数] D --> E[05\n翻译字符串管理] E --> F[06\n翻译工作流 & TMS] F --> G[07\nRTL 与文化适配] G --> H[08\n多区域部署 & SEO]

第 01 章 — i18n 基础:Unicode、字符编码与 locale 标识符

标题 核心内容
01 ASCII / Unicode / UTF-8 编码基础 为什么乱码?UTF-8 / UTF-16 的区别与选择
02 BCP 47 语言标签与 locale 标准 zh-CN / en-US / ar-SA 怎么读?如何正确使用
03 locale 敏感行为与工程影响 排序、数字、日期、货币——locale 改变了什么

第 02 章 — Web 前端 i18n 框架实战

标题 核心内容
01 react-intl 与 next-i18next 选型实战 两框架对比,Next.js App Router 配置完整示例
02 vue-i18n 配置与实战 Vue 3 + Nuxt 3 多语言配置,Composition API 用法
03 动态 namespace 加载与代码分割 按需加载翻译文件,减小首屏 bundle 体积

第 03 章 — 后端与 API 的多语言设计

标题 核心内容
01 Accept-Language 头处理与语言协商 HTTP 语言协商,Express / FastAPI 实现
02 数据库多语言字段设计 单表 JSONB vs 关联翻译表,Prisma / SQLAlchemy 实现
03 错误信息与邮件模板多语言 API 错误码 i18n,邮件模板翻译工作流

第 04 章 — 数字、日期、货币与复数规则

标题 核心内容
01 Intl API 详解:NumberFormat / DateTimeFormat 浏览器原生 Intl API 完整用法与兼容性
02 CLDR 复数规则与 ICU 消息格式 zero/one/two/few/many/other 六类复数,中英阿对比
03 货币显示、汇率策略与时区处理 货币格式化、汇率更新方案、时区陷阱

第 05 章 — 翻译字符串管理与版本控制

标题 核心内容
01 翻译文件格式对比:JSON / PO / XLIFF / ARB 四种格式特性对比,选型建议
02 命名空间规划与 key 命名规范 按功能模块分 namespace,key 命名最佳实践
03 Missing Key 检测与 CI 集成 i18next-scanner、i18n-ally,GitHub Actions 自动检查

第 06 章 — 翻译工作流:人工、机器翻译与 TMS 平台

标题 核心内容
01 人工翻译工作流设计 上下文提供、术语表、审校流程,避免"翻译债"
02 DeepL / Google Translate API 机器翻译集成 MT 集成示例,质量评估与人工后审策略
03 TMS 平台对比:Crowdin / Phrase / Lokalise 三大平台功能对比,GitHub 集成 CI/CD 工作流

第 07 章 — RTL 语言、双向文本与文化适配

标题 核心内容
01 CSS 逻辑属性与 dir="rtl" 布局 margin-inline / padding-block,LTR⇄RTL 切换方案
02 Flexbox / Grid 在 RTL 下的行为与图标镜像 方向反转陷阱,SVG 图标镜像策略
03 文化颜色、日期习惯与本地化内容适配 颜色含义差异、日历系统、图片本地化

第 08 章 — 多区域部署:域名策略、CDN 与 SEO 本地化

标题 核心内容
01 ccTLD vs 子目录 vs 子域名:域名策略对比 三种方案 SEO 影响、运维成本与切换成本
02 hreflang 标签实现与多语言 sitemap hreflang 语法、x-default、常见错误 30 条
03 CDN 地理路由配置与 Edge 语言检测 Cloudflare / CloudFront 地理路由,Edge Function 语言检测

i18n 技术栈全景

graph TB subgraph Frontend["前端层"] A1[react-intl / next-i18next] A2[vue-i18n / nuxt-i18n] A3[Intl API] end subgraph Backend["后端层"] B1[Accept-Language 协商] B2[多语言数据库设计] B3[API 错误信息 i18n] end subgraph Workflow["翻译工作流"] C1[字符串提取] C2[TMS 平台\nCrowdin / Phrase / Lokalise] C3[机器翻译\nDeepL / Google MT] C4[人工审校] end subgraph Deploy["部署层"] D1[域名策略\nccTLD / 子目录 / 子域名] D2[CDN 地理路由] D3[hreflang & Sitemap] end Frontend --> Workflow Backend --> Workflow Workflow --> Frontend Frontend --> Deploy

与书系的关系

书名 关系
web-commerce-ops-guide 第 12 章 多市场业务背景;本书提供工程实现
ecommerce-guide 电商多语言需求场景;本书聚焦技术实现
seo-guide hreflang 和域名策略的 SEO 深化
dns-guide 多区域域名和 CDN 配置的基础设施层

下一步:完成本书后,继续阅读 seo-guide(多语言 SEO 策略深化)或 dns-guide(多区域域名与 CDN 配置)。