<think>我们正在讨论的是在
Vue项目中集成Apache DolphinScheduler的前端
组件（dolphinscheduler-ui）。根据之前的对话历史，用户已经了解了DolphinScheduler的
组件功能，现在想知道如何在
Vue项目中
引入它。
注意：DolphinScheduler的前端部分（dolphinscheduler-ui）是一个独立的前端项目，使用
Vue.js开发。如果我们想在另一个
Vue项目中使用DolphinScheduler的某些功能（比如工作流设计器），我们可以将其作为
组件引入。
然而，需要注意的是，DolphinScheduler的前端项目并不是一个设计为可独立分发的库（比如一个npm包），而是作为一个完整的单体应用开发的。因此，直接作为
组件引入可能有一定困难。但是，我们可以通过以下方式实现：
方法一：将DolphinScheduler的前端代码作为子模块嵌入到现有
Vue项目中（需要修改和适配）
方法二：通过iframe嵌入DolphinScheduler的独立部署的前端（推荐，简单易行）
方法三：将dolphinscheduler-ui的特定
组件（比如工作流设计器）提取出来，封装成单独的npm包，然后在
Vue项目中使用（需要自行构建和发布）
考虑到用户可能希望在自己的
Vue项目中使用DolphinScheduler的工作流设计器，这里我们重点介绍方法二（iframe嵌入）和方法三（提取
组件）的思路，并给出一个基本步骤。
由于方法三需要深入修改DolphinScheduler的前端代码，且过程较为复杂，这里我们主要介绍方法二，并简要提及方法三的步骤。
注意：在DolphinScheduler的官方文档中，并没有提供将UI
组件单独
引入其他项目的说明，因此以下方法属于自定义集成方案。
方法二：通过iframe嵌入（推荐）
步骤：
1. 独立部署DolphinScheduler服务（包括后端和前端）。
2. 在
Vue项目中，使用iframe标签嵌入DolphinScheduler的UI地址（例如：http://your-dolphinscheduler-domain:12345）。
3. 通过iframe的postMessage与DolphinScheduler进行通信（如果需要交互）。
优点：简单，无需修改DolphinScheduler代码。
缺点：无法深度定制，且嵌入的页面是完整的DolphinScheduler系统，不能单独使用某个功能（如工作流设计器）。
方法三：提取工作流设计器
组件（高级）
步骤：
1. 从DolphinScheduler的GitHub仓库（https://github.com/apache/dolphinscheduler）克隆代码。
2. 在dolphinscheduler-ui项目中，找到工作流设计器相关的
组件（通常在src/components目录下，如WorkflowDefinitionDetail.
vue等），以及其依赖的
组件和工具函数。
3. 将所需
组件和依赖提取到一个新的
Vue项目中，并解决依赖和样式问题（这可能需要
大量工作）。
4. 将提取的
组件封装成一个独立的
Vue插件，并发布到npm（或者直接在项目中作为本地
组件使用）。
由于此方法需要深入了解DolphinScheduler的前端代码结构，且步骤复杂，这里不展开详细说明。
因此，我们重点介绍方法二的具体实现步骤（iframe方式）：
步骤1：部署DolphinScheduler
- 参考官方文档部署后端和前端（可以使用Docker或直接安装）。
- 确保后端API和前端服务正常运行。
步骤2：在
Vue项目中嵌入iframe
- 在
Vue组件中，使用iframe标签嵌入DolphinScheduler的URL。
- 示例代码：
```
vue
<template>
<div>
<iframe src="http://your-dolphinscheduler-domain:12345" width="100%" height="800px"></iframe>
</div>
</template>
```
步骤3：调整iframe样式和安全性
- 根据需要调整iframe的宽度和高度。
- 注意跨域问题：如果DolphinScheduler的前端和你的
Vue项目不在同一个域，那么由于浏览器的同源策略，你无法通过JavaScript操作iframe内部的内容（除非两边都设置允许跨域）。如果不需要交互，则无需担心。
步骤4：交互通信（可选）
- 如果需要与嵌入的DolphinScheduler进行交互（例如，从父页面传递参数，或者接收DolphinScheduler的事件），可以使用postMessage。
- 在
Vue组件中监听message事件，并在DolphinScheduler的前端代码中发送消息（这需要修改DolphinScheduler的前端代码）。
注意：修改DolphinScheduler的前端代码来支持消息发送可能涉及以下步骤：
- 在DolphinScheduler的
Vue组件中，在适当的
时机（比如创建完工作流后）发送消息：
window.parent.postMessage({type: 'workflowCreated', data: workflowData}, '*');
- 在父页面（
Vue项目）中监听：
window.addEventListener('message', (event) => {
if (event.data.type === 'workflowCreated') {
console.log('工作流创建成功', event.data.data);
}
});
由于这种方法需要修改DolphinScheduler的源代码，并且重新构建部署，因此仅适用于有定制化需求且能维护DolphinScheduler前端代码的场景。
总结：对于大多数用户，推荐使用iframe方式简单集成。如果需要深度集成工作流设计器，则需投入开发资源提取
组件。
另外，注意：DolphinScheduler社区可能在未来版本中提供独立的前端
组件库，请关注官方动态。
引用说明：
[^1]: DolphinScheduler官方文档：https://dolphinscheduler.apache.org/
下面给出一个在
Vue组件中使用iframe的完整示例：
```
vue
<template>
<div class="dolphinscheduler-container">
<iframe
ref="dsFrame"
src="http://localhost:5173" // 这里替换为实际部署的DolphinScheduler前端地址
width="100%"
height="800px"
frameborder="0"
@load="onIframeLoad"
></iframe>
</div>
</template>
<script>
export default {
name: 'DolphinSchedulerEmbed',
methods: {
onIframeLoad() {
console.log('DolphinScheduler iframe loaded');
// 可以在这里向iframe发送初始化消息（如果需要）
// 注意：由于跨域限制，只有当同源
时才能直接访问iframe的contentWindow
},
},
};
</script>
<style scoped>
.dolphinscheduler-container {
height: 100%;
}
</style>
```
注意事项：
- 确保DolphinScheduler的前端地址正确，且允许被iframe嵌入（检查CSP设置）。
- 如果DolphinScheduler前端和当前
Vue项目不同源，那么除了使用postMessage外，无法直接操作iframe内部。
如果用户需要更深入的集成，建议参考DolphinScheduler的前端项目进行定制化开发。
§§相关问题§§
1. 如何独立部署DolphinScheduler？
2. 在
Vue项目中如何通过postMessage与iframe内页面进行通信？
3. DolphinScheduler的工作流设计器
组件能否单独作为npm包使用？
</think>
在
Vue 项目中集成 Dolphin Scheduler 主要涉及前端 UI 的嵌入和 API 对接。以下是详细方法（基于最新官方实践）：
### 一、核心集成方法
#### 1. **独立部署 + iframe 嵌入（推荐）**
```
vue
<template>
<div class="scheduler-container">
<iframe
src="http://your-dolphin-scheduler-domain:12345"
width="100%"
height="800px"
frameborder="0"
/>
</div>
</template>
<script>
export default {
mounted() {
// 监听调度器事件（可选）
window.addEventListener('message', (event) => {
if (event.origin !== 'http://your-dolphin-scheduler-domain:12345') return;
console.log('收到调度器消息:', event.data);
});
}
}
</script>
```
**优点**：
- 免去前端适配，直接使用官方完整功能
- 天然隔离，避免样式/依赖冲突
- 支持跨域通信（需调度器配置 `Access-Control-Allow-Origin`）[^1]
#### 2. **
组件化集成（需源码改造）**
```bash
# 1. 克隆 UI 源码
git clone https://github.com/apache/dolphinscheduler-ui
# 2. 提取核心
组件（如工作流设计器）
cp -r dolphinscheduler-ui/src/components/workflow/ ./your-
vue-project/src/libs/ds-components
# 3. 在
Vue 项目中注册
组件
import DsDesigner from '@/libs/ds-components/WorkflowDefinitionDetail.
vue'
export default {
components: { DsDesigner }
}
```
```
vue
<template>
<ds-designer
:project-code="projectId"
@save="handleSaveWorkflow"
/>
</template>
```
**注意**：需同步处理以下依赖：
- 修改 Axios 基地址指向 Dolphin API 服务
- 复制关联的 `utils/dag/*` 工具库
- 重写登录认证逻辑（通常使用 JWT 传递）[^2]
---
### 二、后端 API 对接
在 `
vue.config.js` 配置代理解决跨域：
```js
module.exports = {
devServer: {
proxy: {
'/dolphin-api': {
target: 'http://api.dolphinscheduler.com',
changeOrigin: true,
pathRewrite: { '^/dolphin-api': '' }
}
}
}
}
```
API 调用示例：
```js
// 获取工作流列表
axios.get('/dolphin-api/projects/123/workflows')
.then(res => {
console.log(res.data.data)
})
```
---
### 三、最佳实践建议
1. **认证集成**
在调度器 `application.yaml` 添加：
```yaml
security:
authentication:
type: JWT
jwt:
secret: your-
vue-app-secret # 与
Vue 应用一致
```
2. **性能优化**
- 使用 Webpack 排除重复依赖（如
Vue/Lodash）
```js
externals: {
'
vue': '
Vue',
'lodash': '_'
}
```
- 按需加载调度器
组件
```js
const Designer = () => import('@/libs/ds-components/WorkflowDefinitionDetail.
vue')
```
3. **容器化部署**
```Dockerfile
#
Vue 项目 Dockerfile
FROM nginx
COPY dist/ /usr/share/nginx/html
EXPOSE 80
```
---
### 四、调试技巧
1. **本地开发联调**
启动命令添加环境变量：
```json
"scripts": {
"serve": "
VUE_APP_DS_API=http://localhost:5173
vue-cli-service serve"
}
```
2. **查看网络请求**
使用 Chrome 开发者工具过滤 `/dolphin-api` 请求
> 注：官方推荐生产环境采用独立部署 + iframe 集成方案，可无缝升级调度器版本[^1][^2]。
探讨项目开发中快速引入大量组件的方法，避免重复繁琐的步骤，提高开发效率。
扫一扫
1114
到【灌水乐园】发言
