Apache DolphinScheduler 全新 Web UI（dolphinscheduler-ui）开发与构建实战指南

Apache DolphinScheduler 全新 Web UIdolphinscheduler-ui开发与构建实战指南【免费下载链接】dolphinschedulerApache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code项目地址: https://gitcode.com/GitHub_Trending/dol/dolphinscheduler本篇指南围绕 Apache DolphinScheduler 仓库中dolphinscheduler-ui模块的 README 展开系统讲解这套自 V3.0.0-Release 起全新重写的 Web 前端管理系统的技术栈、本地开发启动、生产构建打包以及参与前端开发时的代码规范与类型检查流程。读完本文你将能够独立完成该 UI 模块的环境准备、环境变量配置、开发调试与产物构建并理解其与后端dolphinscheduler-api的对接原理。全新 UI一次彻底的前端重构dolphinscheduler-ui是 Apache DolphinScheduler 的全新一代前端管理系统V3.0.0-Release 引入。相对于旧版 UI它并非简单改版而是一次技术栈与工程规范的全面升级其核心改进体现在三个方面更标准化采用统一的技术栈与目录结构路由、状态、请求层分工清晰代码风格可被工具链强制统一更完善的类型检查机制基于 TypeScript vue-tsc在构建前即可拦截大量类型错误质的飞跃的运行性能依托 Vite 的按需编译与原生 ESM 机制开发与加载速度相较旧版有显著提升。此外新版 UI 内置**暗色模式dark mode与亮色模式light mode**两种主题满足不同开发者的使用偏好。从 package.json 的依赖清单可以清晰看到其技术构成Vue 3Composition API TypeScript 作为框架底座Naive UI 提供组件库AntV X6 支撑 DAG 工作流画布编辑ECharts 承载监控看板图表Pinia 管理全局状态Vue Router 组织路由axios 统一封装 HTTP 请求vue-i18n 实现中英文国际化。说明UI 模块是独立于 Java 后端 reactor 单独构建的构建产物dist/会被dolphinscheduler-dist模块收编进发布包见 CLAUDE.md。因此该模块的构建不依赖 Maven仅需 Node 工具链即可。环境准备Node 与 pnpm 版本要求为获得最佳开发体验官方 README 推荐使用node 16.x.x搭配pnpm 7.x.x。这一版本约束并非随意设定从源码注释与工程实践看见 CLAUDE.mdNode 版本漂移是该项目最常见的故障源较新版本 Node如 18/20自带的 OpenSSL 行为变化可能破坏 Vite/Webpack 等构建链路因此在动手前务必确认当前环境版本node -v # 期望输出 v16.x.x pnpm -v # 期望输出 7.x.x若本机未安装对应版本请从 node 与 pnpm 官方渠道获取对应版本的安装包此处不再展开安装细节。版本确认无误后进入 UI 模块根目录安装依赖# 在仓库根目录下进入 dolphinscheduler-ui pnpm installpnpm install会依据根目录的 pnpm-lock.yaml 锁定依赖版本保证团队成员间依赖一致性。安装完成后即可进入下一步的开发或构建流程。本地开发配置后端地址并启动 Dev Server开发模式下前端需要将 API 请求转发到后端服务。这一步通过项目根目录下的.env.development环境变量文件完成关键参数为VITE_APP_DEV_WEB_URL。修改开发环境变量打开 .env.development其中默认配置为NODE_ENVdevelopment VITE_APP_DEV_WEB_URLhttp://127.0.0.1:12345按 README 的说明将VITE_APP_DEV_WEB_URL改为你实际的后端服务地址。这里有一个值得注意的细节当你不修改请求路径或路由时只需填写http、ip和port结尾不要带/符号例如http://127.0.0.1:12345。理解 Dev 代理链路修改完成后启动开发服务器pnpm run dev该命令实际执行的是 Vite Dev Server见 package.json 中dev: vite默认运行于:5173端口。开发模式下的请求链路可以在 vite.config.ts 中看到完整定义server: { proxy: { /dolphinscheduler: { target: loadEnv(development, ./).VITE_APP_DEV_WEB_URL, changeOrigin: true } } }也就是说Dev Server 将/dolphinscheduler前缀的请求代理到VITE_APP_DEV_WEB_URL指向的后端地址从而规避开发期的跨域问题。这与 service.ts 中 axios 的baseURL逻辑一一对应——开发模式下请求根路径固定为/dolphinschedulerconst baseRequestConfig: AxiosRequestConfig { baseURL: import.meta.env.MODE development ? /dolphinscheduler : import.meta.env.VITE_APP_PROD_WEB_URL /dolphinscheduler, ... }后端dolphinscheduler-api默认监听 12345 端口与.env.development中的默认值一致因此「开箱即用」的默认配置即可直接对接本机后端。开发模式下的请求与鉴权行为除 baseURL 外service.ts 还封装了统一的前后端交互约定开发联调时值得了解请求拦截器自动为每个请求注入sessionId请求头取自用户状态并读取languageCookie 注入language请求头用于会话保持与国际化响应拦截器统一解包后端返回的{ code, msg, data }结构——code 0时直接返回datacode缺失时透传原始响应否则弹出错误消息并抛出异常会话失效处理当响应状态码为401或504时自动清空用户会话并跳转/login登录页见 service.ts。若你在联调中发现接口报 4xx/5xx可优先核对后端 Controller 与前端 TypeScript 包装方法的参数签名是否对齐该模块并未生成 OpenAPI SDK方法签名由人工维护。生产构建配置线上后端地址并打包开发调试完成后需要打包部署时构建流程通过.env.production文件控制。在打包之前请修改其中的VITE_APP_PROD_WEB_URL参数确保打包产物能正确请求到线上后端服务地址。查看 .env.production其默认内容为NODE_ENVproduction VITE_APP_PROD_WEB_URL按实际部署场景将其填充为后端网关地址同样遵循「不含结尾/」的填写规范。随后执行生产构建pnpm run build:prod该命令的执行链条见 package.json为build:prod: vue-tsc --noEmit vite build --mode production即先执行vue-tsc --noEmit做全量类型检查再执行 Vite 生产构建——任何类型错误都会中断打包从工程上保证了产物的类型安全。构建完成后产物输出到dist/目录。生产构建的几项关键行为资源基础路径生产模式下的资源基础路径为/dolphinscheduler/ui/见 vite.config.ts部署时需将构建产物放置于该路径下或由反向代理将/dolphinscheduler/ui/映射到dist/Gzip 预压缩Vite 配置了vite-plugin-compression对大于 10KB 的文件生成.gz变体源文件保留提升静态资源传输效率见 vite.config.ts。若排查线上资源加载异常需确认 Web 服务器是否正确服务.gz变体产物归属构建出的dist/由dolphinscheduler-dist模块收集并打入发布包位于ui/目录下因此在从仓库打包发布前务必先执行pnpm run build:prod见 CLAUDE.md。参与前端开发格式化与类型检查若你想为dolphinscheduler-ui贡献代码README 明确了提交前的两道必备工序。代码格式化修改代码后首先执行统一格式化保证项目代码风格一致pnpm run prettier该脚本对应prettier --write src/**/*.{vue,ts,tsx}见 package.json会按项目约定的 Prettier 规则重排src下所有 Vue/TypeScript/TSX 源文件。项目同时配置了 ESLintpnpm run lint对应eslint src --fix --ext .ts,.tsx,.vue可在格式化基础上进一步做静态检查。类型检查涉及 UI 开发时请务必在提交代码前执行类型检查确保无误后再提交vue-tsc --noEmitvue-tsc会对整个项目的 TypeScript 与 Vue 单文件组件做严格类型推导。由于生产构建本身也会先跑这一检查提前本地执行可避免构建阶段才暴露类型问题。源码结构速览理解这套 UI 的组织方式为了在开发中快速定位代码了解src目录的分层设计很有帮助可对照 CLAUDE.md 与 src 目录目录职责assets/静态图片与字体资源components/可复用 UI 组件表单控件、数据展示、DAG 画布片段等layouts/应用外壳与页面框架locales/i18n 翻译文件en_US、zh_CNrouter/Vue Router 配置按顶级功能模块拆分service/统一 axios 实例 按后端资源拆分的接口文件login、dag-menu、datasource、monitor 等store/Pinia 状态仓库user、project、locales、theme、timezone 等views/页面组件home、projects、datasource、monitor、resource、security、login 等utils/通用工具函数应用入口 main.ts 展示了各模块的装配关系创建 Vue 应用实例后依次挂载vitejs/plugin-vue编译出的根组件、Vue Router、Pinia含持久化插件pinia-plugin-persistedstate与 vue-i18n同时将 ECharts 挂载为全局属性供图表页面直接使用。其中值得特别留意的两点DAG 工作流编辑器views/projects/workflow/components/dag/基于 AntV X6是全项目最复杂的视图模块改动时需格外谨慎见 CLAUDE.md国际化当前支持en_US与zh_CN两种语言语言切换通过languageCookiejs-cookie持久化UI 渲染与请求头均读取该值。常见问题与排查建议pnpm run dev后接口 404/无法连接后端检查.env.development中VITE_APP_DEV_WEB_URL是否指向可达的后端地址且未带结尾/打包产物访问后资源 404确认dist/是否部署在/dolphinscheduler/ui/路径下或反向代理是否正确转发该前缀构建报类型错误vue-tsc --noEmit报错会直接中断build:prod按报错修正类型后再重新构建Node 版本不兼容优先切换到推荐版本node 16.x pnpm 7.x再重新执行pnpm install与pnpm run dev线上资源加载异常检查 Web 服务器是否正确处理 Vite 预压缩生成的.gz文件Content-Encoding: gzip。以上排查路径均可在 README、vite.config.ts、service.ts 与 CLAUDE.md 中找到对应的配置依据。【免费下载链接】dolphinschedulerApache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code项目地址: https://gitcode.com/GitHub_Trending/dol/dolphinscheduler创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考