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.ts Modal、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):

ts 复制代码
// apps/web-antd/src/typings/locale.d.ts
import '@vben-core/typings';

declare module '@vben-core/typings' {
  interface SupportedLanguages {
    'ug-CN': 'ئۇيغۇرچە';
  }
}

2. 核心简单语言包

packages/@core/composables/src/use-simple-locale/messages.ts:

ts 复制代码
export const messages: Partial<Record<Locale, Record<string, string>>> = {
  'en-US': { cancel: 'Cancel', confirm: 'Confirm', ... },
  'zh-CN': { cancel: '取消', confirm: '确认', ... },
  'ug-CN': {
    cancel: 'ئەمەلدىن قالدۇرۇش',
    collapse: 'يىغىش',
    confirm: 'جەزىملەش',
    expand: 'كېڭەيتىش',
    prompt: 'ئەسكەرتمە',
    reset: 'ئەسلىگە قايتۇرۇش',
    submit: 'تاپشۇرۇش',
    toggleSidebar: 'يان بالداقنى ئالماشتۇرۇش',
    confirmTitle: 'جەزىملەڭ',
  },
};

export const getMessages = (locale: Locale) =>
  messages[locale] ?? messages['en-US'] ?? {};

这一层最容易被遗漏。Modal、Alert 的按钮不走 @vben/locales,走的是这个核心简单语言包。

3. 框架语言包

packages/locales/src/langs/ug-CN/ 下要放和 zh-CN 同名同结构的 JSON:

复制代码
authentication.json
common.json
preferences.json
profile.json
ui.json
...

4. 应用语言包

apps/web-antd/src/locales/langs/ug-CN/ 下放业务覆盖,同样和 zh-CN 对齐。

5. 语言列表

SUPPORT_LANGUAGES 或运行时 setSupportLanguages:

ts 复制代码
{ label: 'ئۇيغۇرچە', value: 'ug-CN' }

6. 第三方库

库 做法
Ant Design Vue 拷贝 es/locale/ug_CN.js + date-picker / time-picker / calendar / vc-pagination / vc-picker 下的 ug_CN.js 共 6 份文件
dayjs 官方已有 ug-cn,直接 import 'dayjs/locale/ug-cn'
vxe-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 Dep Vite 依赖预构建缓存过期 删 apps/web-antd/node_modules/.vite,重启
Could not resolve ../date-picker/locale/ug_CN antd locale 入口引用了子模块,只拷了入口 补齐 6 个文件
切换语言界面仍中文 框架层 packages/locales/src/langs/ 缺 ug-CN 从 zh-CN 复制一份
Modal 按钮显示英文 核心简单语言包 messages.ts 缺 ug-CN 在 messages.ts 里加 ug-CN
vxe-table 不跟随切换 Vben 的 localMap 未注册 ug-CN 加映射
文档标签写成 "Chinese (UyGur)" 概念错误,维吾尔语不是中文 改成 "Uyghur" / "维吾尔语"

五、两条重要经验

1. 不要直接改 node_modules

  • pnpm install / 更新依赖会丢失
  • 优先改 workspace 源码(packages/ 下),或用 pnpm patch 固化

2. 改语言后必须清缓存

  • localStorage(偏好设置持久化)
  • node_modules/.vite(Vite 依赖预构建)
  • 浏览器硬刷新 Ctrl+Shift+R

六、向官方提交 PR 的经验

Ant Design Vue

  • Fork → 切分支 feature/locale-ug_CN(基于 upstream/main)
  • 新增 4 个 locale 文件 + 改 dayjs.ts + 改文档
  • 提交格式:feat(locale): add ug_CN locale support
  • PR 描述里说明 dayjs 依赖情况
  • 第一次贡献的 CI 需要维护者手动批准,耐心等

dayjs

  • 官方已有 ug-cn,无需重复提交

七、下次新项目开箱清单

  1. 新建 .d.ts 做类型增强,加 'ug-CN'
  2. 核心简单语言包 packages/@core/composables/src/use-simple-locale/messages.ts 加 ug-CN
  3. 框架语言包 packages/locales/src/langs/ug-CN/ 从 zh-CN 复制
  4. 应用语言包 apps/web-antd/src/locales/langs/ug-CN/ 从 zh-CN 复制
  5. 语言列表 SUPPORT_LANGUAGES 加 ug-CN
  6. Ant Design Vue 拷 6 个文件到 node_modules 或用 patch
  7. vxe-table localMap 加映射
  8. dayjs 直接 import dayjs/locale/ug-cn
  9. 清缓存重启:rm -r apps/web-antd/node_modules/.vite + pnpm dev
  10. 验证:切到维吾尔语,检查框架文字、Antd 组件、vxe-table、Modal 按钮是否都切换

八、最终成果

  • Vben 框架文字
  • Ant Design Vue 组件
  • vxe-table 表格
  • Modal / Alert 按钮(核心简单语言包)
  • 业务页面内容
  • 向 ant-design-vue 提交了 PR #8595

全部同步切换为维吾尔语。

相关推荐
可乐鸡翅yeah_1 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
IT_陈寒1 小时前
Vite静态资源导入这个坑我帮你们踩过了
前端·人工智能·后端
广州华水科技2 小时前
大坝安全监测解决方案:单北斗GNSS形变监测系统应用与维护
前端
星光开发者2 小时前
基于决策树随机森林算法的小说推荐系统的设计与实现-计算机毕设【课程设计】78485
vue.js·算法·微信小程序·django·php·课程设计·express
yivifu2 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
vx_Biye_Design3 小时前
springboot高校选课系统82776-计算机课程设计、毕业设计
java·vue.js·spring boot·后端·spring·课程设计·express
niyongsheng3 小时前
后端零改动,给若依换一套现代化前端
vue.js·开源·node.js
weixin_448290253 小时前
书庐开发实战教学
javascript·css·html
默_笙3 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript