Dify Web 前端开发与部署指南
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 环境变量配置
开发环境下可通过两种方式配置环境变量：
[*]修改 .env 文件
[*]或创建 .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
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]