Dify控制台前端本地化语言包修改与打包构建指南-人工智能-PHP中文网

需在Dify前端启用中文等语言，必须先在next.config.js中声明locales并设defaultLocale，再将翻译文件置于web/public/locales/zh下，更新layout.tsx的supportedLocales和LocaleSwitcher中的localeNames，最后清除.next缓存并重新构建。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

dify控制台前端本地化语言包修改与打包构建指南

你需要在Dify控制台前端中替换默认英文界面为中文或其他语言，但发现修改完语言文件后无法生效，或构建时报错提示缺失翻译键、locale目录未被识别、i18n配置未挂载——这通常是因为Dify前端的i18n资源路径、编译流程与Next.js的国际化机制深度耦合，手动改文件不触发资源注入，也不参与构建时的JSON提取。

确认前端项目结构与i18n入口位置

进入Dify源码根目录下的web子目录，这是Next.js前端工程所在位置：cd dify/web。

检查next.config.js是否已启用next-intl插件支持：打开该文件，确认存在nextIntl配置块，且locales数组包含你目标语言代码（如'zh'），defaultLocale已设为你期望的默认语言。

【关键前提】若next.config.js中未声明zh，后续所有语言包文件都将被忽略，构建时不会生成对应locale路由，控制台访问/zh/console会404。

添加或替换语言包JSON文件

语言资源统一存放在web/public/locales目录下，按语言代码分文件夹组织，例如web/public/locales/zh。

方法一：直接覆盖现有中文包
若已有zh目录，用你校对后的common.json、console.json等文件替换对应文件。注意保留文件名和键名结构一致，否则Next.js运行时找不到key会回退到defaultLocale或显示MISSING_KEY。

方法二：新增一种语言（如繁体中文）
新建web/public/locales/zh-Hant目录 → 复制zh下全部JSON文件 → 逐个打开修改文字内容 → 特别注意检查format字段中的占位符（如{count}、{name}）不能删除或错位，否则组件渲染时抛出React错误。

注入新语言到多语言选择器

第一步：打开web/app/[locale]/layout.tsx，找到const supportedLocales = [...]定义处。

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

第二步：将你的语言代码（如'zh-Hant'）追加进数组，确保顺序与next.config.js中locales一致。

第三步：打开web/components/i18n/LocaleSwitcher.tsx，在localeNames对象中添加对应语言名称映射，例如：'zh-Hant': '繁體中文'。这一步漏掉，切换按钮里就不会出现该语言选项。

第四步：保存后清空.next缓存目录：rm -rf web/.next。Next.js的i18n编译缓存极顽固，不删会导致旧locale列表持续生效。