ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Vben Admin 国际化之旅 : 新增维吾尔语(ug-CN)全流程总结

Vben Admin 国际化之旅 : 新增维吾尔语(ug-CN)全流程总结 Vben Admin 新增维吾尔语ug-CN全流程总结一、背景项目技术栈Vue 3 Vben Adminpnpm monorepo目标为系统新增维吾尔语ug-CN使 Vben 框架层、Ant Design Vue、vxe-table、业务页面全部支持语言切换。二、改动清单层级位置改动内容类型定义vben-core/typings→SupportedLanguages新增ug-CN: ئۇيغۇرچە使SupportedLanguagesType包含ug-CN语言列表SUPPORT_LANGUAGES/setSupportLanguages新增{ label: ئۇيغۇرچە, value: ug-CN }框架语言包packages/locales/src/langs/ug-CN/从zh-CN复制逐个翻译 value应用语言包apps/web-antd/src/locales/langs/ug-CN/业务覆盖demos.json、page.jsonAnt Design Vuenode_modules/.../es/locale/ug_CN.js拷贝 8 个文件见下方dayjsdayjs/locale/ug-cn确认存在否则用英文兜底vxe-tablevxe-pc-ui/lib/language/ug-CN已提交官方正式版在localMap中注册Ant Design Vue 需要的 8 个文件es/locale/ug_CN.js es/locale/ug_CN.d.ts es/date-picker/locale/ug_CN.js es/date-picker/locale/ug_CN.d.ts es/time-picker/locale/ug_CN.js es/time-picker/locale/ug_CN.d.ts es/calendar/locale/ug_CN.js es/calendar/locale/ug_CN.d.tslocale/ug_CN.js内部会 importdate-picker、time-picker、calendar三个子模块只拷入口文件会导致解析失败。三、踩坑记录1. Vite 504Outdated Optimize Dep现象新增依赖文件后浏览器报504 (Outdated Optimize Dep)原因Vite 依赖预构建缓存过期解决删除apps/web-antd/node_modules/.vite重启pnpm dev2. esbuild 解析失败现象Could not resolve ../date-picker/locale/ug_CN原因只拷贝了locale/ug_CN.js缺少三个子模块解决补齐date-picker、time-picker、calendar下的ug_CN3. 切换语言后界面仍为中文现象语言切到维吾尔语Vben 界面文字不变原因框架语言包在packages/locales/src/langs/缺失ug-CN目录全部 key 回退到zh-CN解决在框架层创建ug-CN目录并复制翻译文件4. vxe-table 不跟随切换现象Vben 界面切换成功但 vxe-table 表格文字不变原因Vben 的 vxe-table 初始化里localMap未注册ug-CN解决importugCNfromvxe-pc-ui/lib/language/ug-CN;constlocalMap:PartialRecordSupportedLanguagesType,any{zh-CN:normalizeVxeLocale(zhCN),ug-CN:normalizeVxeLocale(ugCN),};四、两条经验不要直接改node_modulespnpm install/ 更新依赖时会丢失推荐pnpm patch固化或直接在 workspace 源码如packages/locales中修改改语言后必须清缓存localStorage偏好设置持久化node_modules/.viteVite 依赖预构建浏览器硬刷新CtrlShiftR五、最终效果语言切换器中可选维吾尔语切换后Vben 框架文字Ant Design Vue 组件vxe-table 表格业务页面内容全部同步切换为维吾尔语。
返回列表