Windows下调试Dify相关组件(1)--前端Web

1. 什么是Dify?

官方介绍:Dify 是一款开源的大语言模型(LLM) 应用开发平台。它融合了后端即服务(Backend as Service)和 LLMOps 的理念,使开发者可以快速搭建生产级的生成式 AI 应用。

这是个组件式框架,即使是非技术人员,只要会提示词编写,就可以参与到 AI 应用的开发。

官方文档:欢迎使用 Dify | Dify

源码:https://github.com/langgenius/dify.git

2. Web前端

2.1 已经安装了NodeJS+NPM

2.2 使用VS Code打开代码里的 web文件夹

2.3 安装依赖,如果提示没有权限,用管理员打开VS Code

bash 复制代码
npm install

2.4 复制web文件夹下的.env.example,将其改为.env.local

如果只调前端,且后端不在本地,那需修改.env.local里的两个配置

bash 复制代码
NEXT_PUBLIC_API_PREFIX=http://后端IP/console/api
NEXT_PUBLIC_PUBLIC_API_PREFIX=http://后端IP/api

2.5 构建代码

bash 复制代码
npm run build

2.6 启动服务

bash 复制代码
npm run start

启动之前需要修改web文件夹下的package.json,因为start里的cp命令是Linux的。

bash 复制代码
 "start": "xcopy .next\\static .next\\standalone\\.next\\static /E /I /Y && xcopy public .next\\standalone\\public /E /I /Y && cross-env PORT=$npm_config_port HOSTNAME=$npm_config_host node .next/standalone/server.js",
   

xcopy的参数说明:

/E: 复制所有子文件夹,包括空文件夹。

/I: 如果目标是一个文件夹,假定目标是文件夹(避免出现提示询问)

/Y: 自动覆盖(避免出现提示询问)

2.7 访问,用已有账号登录

http://localhost:3000

2.8 结束,可以开始调试前端

相关推荐
码界奇点2 分钟前
基于Spring Cloud Alibaba与Vue.js的分布式在线教育系统设计与实现
前端·vue.js·分布式·spring cloud·架构·毕业设计·源代码管理
fruge2 分钟前
Web Components 封装实战:打造可复用的跨框架组件
前端
糖墨夕2 分钟前
超越随机:JavaScript中真正可靠的唯一标识符生成策略
前端·javascript
码界奇点3 分钟前
基于SpringBoot3+Vue的前后端分离电商系统设计与实现
前端·javascript·vue.js·spring·毕业设计·鸿蒙系统·源代码管理
wordbaby12 分钟前
macOS ⇄ Android 局域网无线传输 APK 终极方案
前端
m0_4711996312 分钟前
【vue】通俗易懂的剖析vue3的响应式原理
前端·javascript·vue.js
LYFlied17 分钟前
【一句话概括】前端项目包管理器怎么选?
前端·npm·pnpm·yarn
Sui_Network19 分钟前
Sui 主网升级至 V1.61.2
大数据·前端·人工智能·深度学习·区块链
哟哟耶耶21 分钟前
css-Echarts图表tooltip / label文本过长 超出屏幕边缘或容器范围
前端·javascript·echarts
郑州光合科技余经理22 分钟前
解决方案:全球化时代下的海外版外卖系统
大数据·开发语言·前端·javascript·人工智能·架构·php