多语言概览
TechUI 的多语言(Internationalization,简称 i18n)模块是一套基于全局服务 $tService 和动态加载机制构建的轻量级解决方案。
与传统的 i18n 插件需要一次性加载所有语言包不同,TechUI 采用 “按需异步加载” 的策略。系统会在启动时自动侦测用户环境或本地缓存的配置,仅请求并加载当前所需的语言文件,从而显著减少首屏资源体积,提升应用性能。
核心特性
自动侦测与加载
系统内置了智能的语言环境判断逻辑。在应用初始化阶段(TuiProvider 挂载前),系统会按照以下优先级确定目标语言:
- 本地锁定配置:检查 LocalStorage 中是否存储了用户手动设置的语言偏好(通过
lockLang设定)。 - 系统/浏览器语言:如果无本地配置,则自动读取浏览器的
navigator.language。 - 默认兜底:如果上述均无法匹配,则默认加载简体中文 (
cn)。
异步按需策略
TechUI 的语言包被设计为独立的 JavaScript 模块(位于 @techui/locales)。
- 当用户处于中文环境时,系统只会执行
import("@techui/locales/cn")。 - 英文或繁体中文资源不会被加载,从而节省网络带宽和内存占用。
模块化管理
为了解决随着项目迭代导致语言包文件过大、难以维护的问题,TechUI 采用了 Plugin 分包结构。 例如在 plugins.cn 目录下,翻译文件被拆分为:
universal.js:通用词汇(确定、取消、返回等)。components.js:UI 组件内部文案。login.js:业务模块文案。dateTime.js:日期时间相关文案。
在最终编译时,这些分包会被聚合为一个入口文件(如 cn.js),既保证了开发时的可维护性,又保证了运行时的加载效率。
支持范围
目前 TechUI 官方内置支持以下三种标准语言环境:
| 语言代码 | 描述 | 对应模块文件 |
|---|---|---|
| cn | 简体中文 (Simplified Chinese) | @techui/locales/cn |
| hk | 繁体中文 (Traditional Chinese, Hong Kong) | @techui/locales/hk |
| en | 英语 (English) | @techui/locales/en |
限制说明
不支持热重载 (No Hot-Swap) 为了保持架构的轻量化和高性能,TechUI 的多语言系统不支持在不刷新页面的情况下实时切换语言。 当用户切换语言后,必须调用 location.reload() 重新加载页面,以确保新的语言包被正确加载并应用到所有的响应式状态及组件实例中。