1. 开发环境配置

1.1 系统要求

• Node.js >= 18.17.0
• pnpm >= 8.x

1.2 开发环境准备

# 克隆仓库
git clone https://github.com/langgenius/dify.git
cd dify/web

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

开发服务器默认会在 http://localhost:3000 启动。

1.3 环境变量配置

开发环境下可通过两种方式配置环境变量：

1. 修改 .env 文件
2. 或创建 .env.local 文件（推荐，不会被 git 跟踪）

主要环境变量包括：

# API路径配置
NEXT_PUBLIC_API_PREFIX=/console/api
NEXT_PUBLIC_PUBLIC_API_PREFIX=/api
NEXT_PUBLIC_MARKETPLACE_API_PREFIX=/marketplace/api
NEXT_PUBLIC_MARKETPLACE_URL_PREFIX=/marketplace

# 版本配置
NEXT_PUBLIC_EDITION=SELF_HOSTED

# 其他配置
NEXT_PUBLIC_SUPPORT_MAIL_LOGIN=false

2. 项目结构和关键文件

2.1 目录结构

web/
├── app/              # Next.js App Router 结构
│   ├── components/   # 组件目录
│   ├── (commonLayout)/ # 主应用布局
│   │   ├── apps/     # 应用相关页面
│   │   ├── datasets/ # 数据集相关页面
│   │   └── ...       # 其他页面
│   ├── signin/       # 登录页面
│   └── ...
├── config/           # 配置文件
├── service/          # API服务
├── utils/            # 工具函数
├── i18n/             # 国际化资源
├── public/           # 静态资源
├── next.config.js    # Next.js配置
└── ...

2.2 关键配置文件

• config/index.ts - 全局配置，包括API路径
• next.config.js - Next.js配置
• .env 和 .env.example - 环境变量配置
• middleware.ts - 请求拦截和处理
• service/fetch.ts - 请求处理基础逻辑

3. API接口配置

3.1 接口路径配置

接口路径主要在 config/index.ts 文件中配置：

// 通过环境变量设置API路径
if (process.env.NEXT_PUBLIC_API_PREFIX && process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX) {
   
    
    
  apiPrefix = process.env.NEXT_PUBLIC_API_PREFIX
  publicApiPrefix = process.env.NEXT_PUBLIC_PUBLIC_API_PREFIX
}
else if (
  globalThis.document?.body?.getAttribute('data-api-prefix')
  && globalThis.document?.body?.getAttribute('data-pubic-api-prefix')
) {
   
    
    
  // 从HTML属性获取API路径
  api