ARTICLE DETAIL

资讯详情

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

Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一

Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一 Vben Admin 新增维吾尔语ug-CN完整总结一、涉及的所有层级在 Vben Admin 里加一门新语言需要同步修改以下层级缺一不可层级位置作用类型定义vben-core/typings的SupportedLanguages让SupportedLanguagesType包含ug-CN核心简单语言包packages/core/composables/src/use-simple-locale/messages.tsModal、Alert 等核心组件的按钮文字框架语言包packages/locales/src/langs/ug-CN/Vben 框架通用文案登录、偏好、UI 等应用语言包apps/web-antd/src/locales/langs/ug-CN/业务覆盖demos、page 等语言列表SUPPORT_LANGUAGES/setSupportLanguages语言切换器显示维吾尔语第三方库Ant Design Vue、vxe-table、dayjs各组件库自身的 locale二、各层详细配置1. 类型定义在应用内新建.d.ts用模块增强不改 node_modules// apps/web-antd/src/typings/locale.d.tsimportvben-core/typings;declaremodulevben-core/typings{interfaceSupportedLanguages{ug-CN:ئۇيغۇرچە;}}2. 核心简单语言包packages/core/composables/src/use-simple-locale/messages.tsexportconstmessages:PartialRecordLocale,Recordstring,string{en-US:{cancel:Cancel,confirm:Confirm,...},zh-CN:{cancel:取消,confirm:确认,...},ug-CN:{cancel:ئەمەلدىن قالدۇرۇش,collapse:يىغىش,confirm:جەزىملەش,expand:كېڭەيتىش,prompt:ئەسكەرتمە,reset:ئەسلىگە قايتۇرۇش,submit:تاپشۇرۇش,toggleSidebar:يان بالداقنى ئالماشتۇرۇش,confirmTitle:جەزىملەڭ,},};exportconstgetMessages(locale:Locale)messages[locale]??messages[en-US]??{};这一层最容易被遗漏。Modal、Alert 的按钮不走vben/locales走的是这个核心简单语言包。3. 框架语言包packages/locales/src/langs/ug-CN/下要放和zh-CN同名同结构的 JSONauthentication.json common.json preferences.json profile.json ui.json ...4. 应用语言包apps/web-antd/src/locales/langs/ug-CN/下放业务覆盖同样和zh-CN对齐。5. 语言列表SUPPORT_LANGUAGES或运行时setSupportLanguages{label:ئۇيغۇرچە,value:ug-CN}6. 第三方库库做法Ant Design Vue拷贝es/locale/ug_CN.jsdate-picker/time-picker/calendar/vc-pagination/vc-picker下的ug_CN.js共 6 份文件dayjs官方已有ug-cn直接import dayjs/locale/ug-cnvxe-table在 Vben 的setupVbenVxeTable的localMap里加ug-CN: ugCN三、Ant Design Vue 的 6 个文件只拷locale/ug_CN.js不够它内部会 import 三个子模块es/locale/ug_CN.js es/date-picker/locale/ug_CN.js es/time-picker/locale/ug_CN.js es/calendar/locale/ug_CN.js es/vc-pagination/locale/ug_CN.js es/vc-picker/locale/ug_CN.js每个还要有对应的.d.ts。缺任何一个构建时 esbuild 会报Could not resolve。四、踩过的坑坑原因解决504 Outdated Optimize DepVite 依赖预构建缓存过期删apps/web-antd/node_modules/.vite重启Could not resolve../date-picker/locale/ug_CNantd locale 入口引用了子模块只拷了入口补齐 6 个文件切换语言界面仍中文框架层packages/locales/src/langs/缺ug-CN从zh-CN复制一份Modal 按钮显示英文核心简单语言包messages.ts缺ug-CN在messages.ts里加ug-CNvxe-table 不跟随切换Vben 的localMap未注册ug-CN加映射文档标签写成 “Chinese (UyGur)”概念错误维吾尔语不是中文改成 “Uyghur” / “维吾尔语”五、两条重要经验1. 不要直接改 node_modulespnpm install/ 更新依赖会丢失优先改 workspace 源码packages/下或用pnpm patch固化2. 改语言后必须清缓存localStorage偏好设置持久化node_modules/.viteVite 依赖预构建浏览器硬刷新CtrlShiftR六、向官方提交 PR 的经验Ant Design VueFork → 切分支feature/locale-ug_CN基于upstream/main新增 4 个 locale 文件 改dayjs.ts 改文档提交格式feat(locale): add ug_CN locale supportPR 描述里说明 dayjs 依赖情况第一次贡献的 CI 需要维护者手动批准耐心等dayjs官方已有ug-cn无需重复提交七、下次新项目开箱清单新建.d.ts做类型增强加ug-CN核心简单语言包packages/core/composables/src/use-simple-locale/messages.ts加ug-CN框架语言包packages/locales/src/langs/ug-CN/从zh-CN复制应用语言包apps/web-antd/src/locales/langs/ug-CN/从zh-CN复制语言列表SUPPORT_LANGUAGES加ug-CNAnt Design Vue 拷 6 个文件到node_modules或用 patchvxe-tablelocalMap加映射dayjs 直接 importdayjs/locale/ug-cn清缓存重启rm -r apps/web-antd/node_modules/.vitepnpm dev验证切到维吾尔语检查框架文字、Antd 组件、vxe-table、Modal 按钮是否都切换八、最终成果Vben 框架文字Ant Design Vue 组件vxe-table 表格Modal / Alert 按钮核心简单语言包业务页面内容向 ant-design-vue 提交了 PR #8595全部同步切换为维吾尔语。
返回列表