做多语言不是把文案翻译一遍那么简单。同一个词在中文里不分单复数，到了英文要分两种形式，遇到阿拉伯语要分六种；日期、货币、数字的写法每个地区都不一样；用户打开页面该显示哪种语言要自动判断，判断不准还得能手动切换；文案越攒越多之后，全塞进主包会让首屏越来越慢。这次整理了 4 款开源免费、可商用的前端国际化库，分别解决翻译管理、语言识别、文案远程加载和轻量替换这几件事，可以单用也能组合起来用。
核心是 i18next
i18next 是前端国际化里用得最广的一款，支持嵌套结构的文案、变量插值，复数规则按语言自动切换，上下文和性别区分也能处理，还支持用命名空间把文案分模块管理，比如公共文案、订单模块、后台模块各放各的，改动互不影响。它纯前端运行、零依赖，有完整的事件机制，切换语言时页面上的文案会自动刷新，不用手动重渲染。中小项目用它的基础能力就够了，大型多语言站点再往上接插件扩展。
两个很实用的配套插件
第一个是语言自动检测插件，它会按你配置的顺序判断用户该看哪种语言，常见做法是先看地址栏参数，再看本地存储里用户上次选的，然后是 Cookie，最后读浏览器语言，判断不准还能兜底到默认语言。自己写这套逻辑容易漏分支，插件几行就配好了。第二个是文案远程加载插件，把翻译文案拆成单独的 JSON 文件按需拉取，页面切到哪种语言就加载哪个文件，不用把几十种语言的文案全打进 JS 里。文案改了直接更新 JSON 文件，不用重新发版，长期维护会轻松很多。
想要轻量就用它
i18n-js 走的是简单路线，传一份按语言组织的字典进去，调用翻译方法就能取到对应文案，内置了复数处理和数字、货币、日期的本地化格式化，体积小、上手快。适合中小型项目，或者本来只想在现有页面里加几处多语言、不想引入完整方案的情况。它的短板是缺少命名空间和插件生态，文案规模大了之后管理起来会吃力，所以如果一开始就规划了多语言站点，建议直接上 i18next，后面不用换。
做多语言最容易踩的坑
一是不做复数规则。中文没有单复数，很多人写代码时就按一种形式写死了，换成英文就会出现「1 items」这种低级错误，用库的复数能力能避免。二是不做文案外置，直接把中文写在组件里，等要做第二种语言时就得全文替换，返工量极大，一开始就应该把文案抽出来。三是忽略排版差异，德文和俄文的词通常比英文长很多，按中文宽度设计的按钮放进外文文案就会溢出，布局要留余量。四是日期和数字直接用默认格式，用户看到 03/04/2026 会分不清是几月几号。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版和未压缩版两种文件，正式项目引压缩版。四款库都用 script 标签引入就能拿到全局对象，也支持模块化引入。i18next 核心和两个插件是配套使用的，引入顺序上核心在前、插件在后，插件会自动挂到核心实例上，顺序错会报错。每个目录都附带了官方说明文档和许可文件，方便核对用法和授权。全部可免费商用、修改和再分发，保留各自的许可文件即可。
多语言能力平时不显眼，但它决定了产品能不能走出中文圈子。很多工具站和资料站内容质量不错，就是因为只有中文，用户规模一直上不去；把国际化这层提前铺好，后面加语言就是补一份 JSON 文件的事。上手建议是先不做多语言，但把文案外置这一步做了，等真要加语言时成本会低一个量级。后面还会继续整理前端开发常用的组件和数据类合集，需要的可以先收藏。
暂无评论内容