尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
手写i18n层对比:bloub为何拒绝vue-i18n,用240行代码实现三语支持
前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载bloub是一个用 SVG 复刻 x.ai 机器人头像的 Vue 3 小项目一个黑色图形在 14 种状态间形变表情、颜色、形状都能自定义。它的多语言功能没有使用 vue-i18n而是用src/i18n/目录下约 240 行手写 TypeScript 实现了法、英、中三语支持——这是量出来的取舍而非固执己见。先上对比数据为什么值得手写方案gzip 体积语言能力未知键检查vue-i18n34.4 kB日期、货币、复数、懒加载…运行时才发现bloub 手写层0.55 kB3 种语言、约 90 条文案编译期报错项目里没有任何日期或货币格式需求只有 3 种语言、约 90 条文案。为一个如此小的需求引入 34.4 kB 的依赖bloub 的答案是否。数据出处docs/i18n.md。手写层的全部家当src/i18n/index.ts —— 入口语言切换与t()函数src/i18n/langues.ts —— 语言定义与检测规则刻意不碰 DOMsrc/i18n/format.ts —— 插值与复数机制纯函数易于测试src/i18n/locales/fr.ts / en.ts / zh.ts —— 三语字典src/i18n/i18n.test.ts —— 完整性测试fr.ts 是契约漏翻译直接编译失败三个字典中最巧的设计fr.ts 是参考字典en和zh的类型都被声明为typeof fr你在fr.ts里新增一个键 →vue-tsc立刻在en.ts、zh.ts报编译错误漏翻译根本进不了 CI而t(reglage.x)这样的调用因为键名不存在同样编译不通过——vue-i18n 只能到运行时才发现。两个容易被忽视的细节千万不要给fr.ts加as const那样每个值都会变成字面量类型所有翻译都会被拒绝英文字符串不是法文字符串键名本身也有类型t()的签名只接受fr.ts里真实存在的键路径。语言检测检测 ≠ 记忆langues.ts 里的choisirLangue规则很克制显式选择永远优先——用户手动切过英文不会因为换了网络就变回法语否则按顺序遍历navigator.languages这是偏好排序不是集合取第一个会说的标签解析走Intl.Locale而非split(-)[0]这样zh-Hans-CN能正确落到zh全都不匹配时回退到默认法语。关键设计自动检测到的语言不写入 localStorage只有用户明确选择才通过 stockage.ts 持久化。否则一个首次从海外访问的用户语言会被冻结永远改不回来。语言列表刻意用内名Français / English / 简体中文而非翻译名——语言列表本来就是给看不懂该语言的人看的翻译它没有意义。复数与数字交给 Intl别自己拼format.ts只解决两件事插值{name}占位符替换没有提供值的占位符原样保留屏幕上看得见比空字符串更容易排查复数法语把 0 归为单数0 animation英语归为复数0 animations中文没有复数。字典里用|分隔单复数形式由Intl.PluralRules裁决而不是n 1。数字格式同理——法语小数用逗号、英语用点中文单位前不加空格。bloub 用带缓存的Intl.NumberFormatnombre/pourcentage/secondes而不是.replace(., ,)式的土办法。顺带一提timeline.ts 保持纯函数所有本地化格式化都从/i18n走模块间零耦合。标点符号属于翻译不属于代码这是文档里最较真的一条法语要« … »加不间断空格英语要…中文要全角标点且单位前不留空格。如果某个组件自己往文案前面拼一个«三种语言立刻坏掉两种。所以引号、空格、标点全部写进字典里由 zh.ts 这类文件自行承载。这些状态名Idle / 待机 / 眨眼……就来自字典的states目录在 BlockPicker.vue、Timeline.vue 等组件中通过t()渲染全项目共207 处t()调用。还有一处精妙设计未命名的动画序列不存 Default cycle 字符串而是存空串显示时经nomDeCycle()解析——这样默认名会跟随当前语言。写死名字的话首次访问写入 localStorage 后就变成了用户数据换语言也不会再翻译。什么时候该换回 vue-i18n作者没有留模糊地带docs/i18n.md 明确列出了切换门槛需要懒加载语言包首屏变重时语言超过10 种出现非开发者译者需要消息平台、XLIFF 流程等工具链。届时只需重写src/i18n/内部207 处调用方一行都不用动——这就是把接口收敛在 240 行里的价值。小结问题bloub 的答案键名打错 / 漏翻译typeof fr 路径类型编译期拦截语言检测尊重显式选择 按序匹配 默认法语复数差异Intl.PluralRules字典里|分形式数字与标点Intl 写进翻译代码零拼接何时换 vue-i18n懒加载 / 10 语言 / 非开发者译者对个人项目够用 类型安全 体积极小往往比引入成熟库更划算。240 行不是偷懒而是把复杂度花在了刀刃上。想跑起来看看克隆仓库后执行pnpm install pnpm dev打开浏览器即可切换三种语言。赞分享前端图形学【免费下载链接】bloubSVG recreation of the x.ai bot avatar. One shape morphing through 14 states, measured off the reference video frame by frame.项目地址https://gitcode.com/gh_mirrors/bl/bloub点击查看免费下载相关推荐Vue I18n 国际化插件完整指南如何为Vue应用添加多语言支持Vue I18n 国际化插件完整指南如何为Vue应用添加多语言支持 Vue I18n 是 Vue.js 的官方国际化插件让开发者能够轻松为应用程序添加多语言前端国际化Stylis核心组件详解Parser、Tokenizer和Serializer的工作原理Stylis核心组件详解Parser、Tokenizer和Serializer的工作原理 Stylis作为一款轻量级CSS预处理器其核心功能由ParserQQ空间说说备份用GetQzonehistory免费备份全部历史说说QQ空间说说备份用GetQzonehistory免费备份全部历史说说 打开QQ空间网页把说说往早年翻互动列表只展示有限页数更老的内容往往不在列表里。Get网页爬虫数据分析创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
RELATED

相关推荐

DeepSeek从入门到精通:MoE架构、API集成与参数调优实战指南

DeepSeek从入门到精通:MoE架构、API集成与参数调优实战指南

简介:围绕DeepSeek大语言模型的系统性入门到精通指南,内容从技术原理、使用操作到工程应用层层递进,覆盖自然语言处理、多语言处理、编程辅助和接口开发等场景;资源面向AI开发者、研究人员及普通用户,既可作为新手首次…

📅 2026/10/11 11:11:24
Win8.1安装程序集成DWM桌面合成器:环境检测、毛玻璃与降级策略

Win8.1安装程序集成DWM桌面合成器:环境检测、毛玻璃与降级策略

1. 为什么要在安装程序里折腾桌面合成器 第一次看到“给安装程序加上 DWM”这个思路,我脑子里蹦出来的画面是:一个本该老老实实跑进度条、复制文件、写注册表的安装界面,突然开始玩起了毛玻璃、窗口动画和实时缩略图。听起来像是吃饱了撑的&a…

📅 2026/10/11 11:11:24
康茂盛气动选型软件:离线选型、BOM导出与CAD模型对接实操

康茂盛气动选型软件:离线选型、BOM导出与CAD模型对接实操

简介:这份资源是康茂盛(Camozzi)气动元件选型软件,面向从事自动化设备、非标机械与气动系统设计的工程师及设计专业学生,用于解决气动执行元件、控制元件、气源处理装置、真空元件等产品在选型与三维建模环节的效率问题…

📅 2026/10/11 11:11:24
MORE NEWS

更多资讯

📰

UCF101+CRNN视频动作识别实战:轻量、稳定、可解释的工业级基线方案

简介:本资源是一套面向深度学习与计算机视觉初学者及进阶学习者的UCF101视频动作识别完整实践方案,聚焦CRNN模型在人体动作识别任务中的端到端实现。资源包含数据预处理、模型构建(CNNLSTM)、训练监控、预测分析与结果可视化全流程…

📰

Qt+MySQL股票管理系统实战:从环境搭建到事务处理

简介:这是一份面向计算机相关专业低年级学生的C课程设计参考项目,以股票管理系统为主题,将C面向对象编程、Qt图形界面开发与MySQL数据库操作整合为一个可运行的桌面应用,适合正在准备课设、毕设或想入门Qt数据库组合开发的学习者。…

📰

交换机工作原理全解析:MAC地址表、泛洪转发与网络排障

先说个我自己的感受:搞网络这行,很多人一开始都栽在“交换机和路由器到底有啥区别”这个问题上。有人画了一堆拓扑图,背了一堆命令,但真到了排查故障的时候,反而不知道从哪下手。其实根源就在于对交换机转发数据这件事…

📰

C++类型标签分发:优雅的编译期分派技巧

写C写得久了,你会发现真正的瓶颈往往不在语言本身,而在“如何在编译期把类型信息变成行为”。类型标签分发(tag dispatch)就是这样一套让我用了很多年、依然觉得优雅的编译期技巧。它做的事情很简单:把类型特征编码成一…

📰

交换机工作原理详解:MAC地址表、转发与排障实战

这周的日志,我不打算继续记新协议,而是想把交换机的原理从头到尾捋一遍。原因很简单:不管做网络运维还是准备认证考试,交换机都是绕不开的基础设备。你在办公室、机房、家里看到的那些带一排网口的盒子,大多数都是交换…

📰

英语电影院口语训练:从选片、观影到复盘的完整实操方法

我见过太多人陷入同一种困境:原声片看了几百部,单词量看着也不小,可一开口还是只会往外蹦单词,连不成一句像样的话。我自己也有一段这种尴尬期,直到我彻底改变了看电影的方式,把“英语电影院口语”当作一套…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬