3.2.2 apache dolphinscheduler-ui启动时无登录界面

问题描述

在使用 pnpm run dev 启动 Apache DolphinScheduler UI 模块服务后，访问对应链接时，浏览器没有显示正常的登录界面。按照正常情况，页面应该展示登录界面，但此时页面空白。

本地pnpm版本：10.2.1
本地node.js版本：v20.18.2

问题排查

1、通过浏览器的开发者工具（F12）检查，Console 窗口中报出如下错误：

Uncaught Error: A route named "ui-setting" has been added as a child of a route with the same name. Route names must be unique and a nested route cannot use the same name as an ancestor.
    at checkSameNameAsAncestor (vue-router.js?v=fe03ae91:1156:13)
    at addRoute (vue-router.js?v=fe03ae91:953:13)
    at addRoute (vue-router.js?v=fe03ae91:964:11)
    at vue-router.js?v=fe03ae91:1063:29
    at Array.forEach (<anonymous>)

从报错信息可以看出，vue-router 检测到在路由配置中，一个名为 ui-setting 的路由被重复定义为父级路由的子路由，这违反了路由名称的唯一性规则，导致系统运行时出现异常。

2、通过检查 ui-setting 文件的路由配置，发现存在如下代码片段：

从中可以看到，父路由和子路由均定义了相同的 name 值——ui-setting，这是导致报错的直接原因。根据 vue-router 的规则，路由名称必须唯一，且子路由不能与父路由共享相同的名称。

解决方案

为了解决此问题，需要确保所有路由的 name 值唯一。对上述代码做如下修改：

修改后，父子路由的名称已经区分开来，重新启动服务并访问链接后，页面恢复正常。

总结

本次问题的根本原因在于路由配置中违反了 vue-router 的规则：路由名称必须唯一且子路由不能与父路由名称重复。通过修改路由配置中 name 的值为不同的名称，成功解决了问题。