问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

qiankun+vue3 主项目结合 umi4 子项目在跳转子项目后主项目路由提示404问题如何解决？

头像
gaomigithub
    214
    新手上路，请多包涵

    qiankun+vue3主项目umi4子项目，子项目成功加载但是在render的下一帧就404了，或许是路由配置有问题。
    我像这样注册了我的umi子项目进行测试：
    image.png
    这便是umi子项目sub-app-2的.umirc.ts中的配置：
    image.png
    由于我选用了一个开源的叫做like-admin的一个Vue3项目作为基座，它的菜单和路由结构是类似这样：
    image.png
    也就是类似 /目录/路由 的结构；然后在进入子项目2也就是我们的测试目标时在好像渲染了子项目的一瞬间跳进了404出现了如下的问题：
    image.png

    主应用的url为 http://localhost:5173/
    子应用独立启动时url为http://localhost:5002/ ， 主页umi会自动跳转到http://localhost:5002/microapp/sub-app-2/home
    对 http://localhost:5173/microapp/sub-app-2/home 出现了404，这个在我曾经测试的一个umi4分别作为基座和子项目测试时候并没有出现感觉也不该出现这种成功加载render了子项目但是路由404了，我很好奇是不是我的哪里router配置出了问题？

    我的demo的repo

    👆👆👆
    这里是我的demo code如果有兴趣知道详细的代码环境可以参看这里非常感激

    ============更新==============
    现在发现了是因为之前404的路由path写成了'/:pathMatch(.*)*'，导致了所有找不到的路由都导到404上；
    于是参照这个issue下的方案做了一些修改把404页面单抽出来path做成/404，然后路由守卫那边做成大概如下尝试：
    image.png

    虽然能够见到子项目了，但是console种其实能看出以下问题：
    image.png
    image.png

    也就是（似乎）依然因为microapp/sub-app-2/home 在vue主项目那里的动态路由中是不存在的路由path所以会跳入404的逻辑
    继续思考……

    qiankunvue3微前端umi
    阅读 1.2k
    avatarAI BotBETA

    在使用 qiankun 结合 Vue3 主项目和 Umi4 子项目时，遇到路由跳转至子项目后主项目提示 404 的问题，通常是由于路由配置或者 qiankun 的生命周期钩子没有正确处理导致的。以下是一些可能的解决步骤：

    1. 确保子应用的 base 配置正确

      在 Umi 中，可以通过配置 base 来设置应用的公共路径。当子应用作为微前端的一部分时，这个 base 应该设置为空字符串（/）或者与主应用协商好的一个路径前缀，确保主应用能够正确代理到子应用的路由。

    2. 检查主应用的路由配置

      主应用需要能够正确匹配到子应用的路由，并在匹配时触发子应用的加载。如果主应用没有为子应用预留路由，或者路由配置不正确，就可能导致 404。

    3. 使用 qiankun 的生命周期钩子

      确保在子应用中正确使用了 qiankun 的生命周期钩子，如 bootstrap、mount 和 unmount。在 mount 钩子中，子应用应该能够接管渲染并处理其路由。

    4. 检查 HTML 模板中的 <base> 标签

      当子应用被加载到主应用的 DOM 中时，它的 HTML 模板中的 <base> 标签可能会导致路径解析错误。确保子应用的 HTML 模板中没有 <base> 标签，或者它的值被正确设置。

    5. 调试和日志

      在子应用和主应用中添加调试和日志语句，以便更好地理解发生了什么。你可以检查网络请求、路由变化、qiankun 的生命周期钩子调用等。

    6. 查看网络请求

      使用浏览器的开发者工具查看网络请求，确保子应用的资源文件（如 JavaScript、CSS 等）被正确加载，并且没有 404 错误。

    7. 参考文档和社区

      查阅 qiankun 和 Umi 的官方文档，以及相关的社区和论坛，看看是否有其他人遇到过类似的问题，并找到了解决方案。

    8. 简化问题

      如果可能的话，尝试简化你的代码和配置，只保留必要的部分，以便更容易地定位问题。

    9. 更新依赖

      确保你使用的 qiankun、Vue3 和 Umi4 都是最新版本，或者至少是与官方文档和社区推荐的版本兼容的版本。

    10. 检查子应用的路由模式

      在 Umi 中，可以通过配置 history 来设置路由模式（如 hash、browser 等）。确保子应用的路由模式与主应用兼容，并且正确配置。

    最后，由于你提供了 demo 的 repo，我强烈建议直接查看你的代码以获取更具体的解决方案。但是，由于我不能直接访问你的代码库，以上建议是基于你提供的信息和一般的微前端实践给出的。

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题
    宣传栏