Dify 多语言国际化模块深入解析

最新推荐文章于 2026-01-08 17:14:51 发布

原创

最新推荐文章于 2026-01-08 17:14:51 发布 · 1.1k 阅读

标签

#前端 #react.js #架构

前言

本文将深入解析 Dify 的多语言实现机制。

整体架构

Dify 项目采用了基于 i18next 的国际化解决方案，整体架构如下：

i18n/
├── languages.json       # 语言配置文件
├── language.ts          # 语言类型定义
├── index.ts             # 客户端入口
├── server.ts            # 服务端入口
├── i18next-config.ts    # i18next配置
├── auto-gen-i18n.js     # 自动翻译脚本
├── check-i18n.js        # 翻译完整性检查
├── en-US/               # 英文翻译文件目录
│   ├── common.ts
│   ├── app.ts
│   └── ...              # 其他模块翻译
└── zh-Hans/             # 中文翻译文件目录
    ├── common.ts
    ├── app.ts
    └── ...              # 其他模块翻译

这种架构实现了以下几个关键特性：

模块化管理：每个功能模块都有独立的翻译文件，便于维护
多平台支持：同时支持客户端和服务端渲染
自动翻译：利用必应翻译 API 自动生成缺失的翻译项
完整性检查：提供工具检查翻译的完整性

核心技术实现

1. 语言配置管理

Dify 使用languages.json文件管理所有支持的语言：

{
   
   
  "languages": [
    {
   
   
      "value": "en-US",
      "name": "English (United States)",
      "prompt_name": "English",
      "example": "Hello, Intellido!",
      "supported": true
    },
    {
   
   
      "value": "zh-Hans",
      "name": "简体中文",
      "prompt_name": "Chinese Simplified",
      "example": "你好，Intellido！",
      "supported": true
    }
    // 其他语言...
  ]
}

通过supported字段可以灵活控制系统支持的语言范围，而无需删除任何代码。

2. i18next 配置

项目使用 i18next 作为国际化框架，在i18next-config.ts中进行配置：

const loadLangResources = (lang: string) => ({
   
   
  translation: {
   
   
    common: require(`./${
     
     lang}/common`).default,
    app: require(`./${
     
     lang}<