微前端实战一

大家好,我是Petter Guo

一位热爱探索的全栈工程师。在这里，我将分享个人的Technical essentials，带你玩转前端、后端到 DevOps 的硬核技术，解锁AI，助你打通技术任督二脉，成为真正的全能玩家!！

如果对你有帮助, 请点赞+ 收藏 +关注鼓励下, 学习公众号为 全栈派森。

微前端（Micro-Frontends）作为一种将大型前端应用拆解为多个独立、可自治的小型应用的技术架构，正逐渐成为解决巨石应用（Monolith Application）痛点的首选方案。然而，在实际落地过程中，开发者常常面临路由、通信和样式隔离等诸多挑战。

本文将以 qiankun 框架为核心，深度解析我们在一系列实践中遇到的路由难点，并提供一套完整、系统的解决方案。

核心思想：主应用与微应用的“双向奔赴”

qiankun 架构下的路由并非由单一应用控制，而是主应用与微应用协同工作的产物。理解这一点，是解决所有路由问题的起点。

• 主应用的角色：作为统一入口，它掌控着 URL 的完整路径。它通过 activeRule 监听 URL 变化，一旦匹配，便通知 qiankun 加载并渲染对应的微应用。

• 微应用的角色：它只关心自身内部的路由。为了与主应用协作，它需要知道 URL 前面的前缀，并在此基础上处理自己的子路由。

这种“主应用在外，微应用在内”的模式，构成了 qiankun 路由的核心。

难点解析：路由模式与 base 路径的博弈

在实践中，最令人困惑的莫过于 history 模式下 base 路径的配置。这个问题如果不解决，微应用内部的任何跳转都会失败。

• 问题：Vue Router 的 base 路径该如何设置？为什么微应用在独立运行时和被 qiankun 加载时的表现不一样？

• 解决方案： 我们必须动态设置 base 路径，让微应用在不同环境下都有正确的表现。

通过这种方式，微应用在 qiankun 环境下会自动使用 /admin/vue2-app/ 作为前缀，而在独立运行时则使用根路径 /，实现了完美兼容。

难点解析：按需加载与 history 模式的“致命冲突”

当你使用 history 模式和 import() 按需加载来优化应用性能时，一个常见的陷阱是服务器配置不当导致的 404 错误。

• 问题：页面 URL 变化了，但页面空白，浏览器控制台报 404。

• 原因：history 模式下，浏览器会向服务器请求 .../pms/product/add 这样的文件。但服务器上并没有这个物理文件，导致 404。同时，按需加载的 JS 文件也因此无法加载。

• 解决方案： 我们需要告诉服务器：当找不到文件时，请返回 index.html。

• 开发环境：在 vue.config.js 中开启 devServer.historyApiFallback。

• 生产环境：在你的 Nginx 或 Apache 配置中添加 try_files 指令，确保所有路由请求都回退到 index.html。

history模式下, 需要修改服务配置, 但hash模式需要修改路径匹配;

qiankun 框架下的微前端实践，其核心挑战在于正确处理主应用和微应用之间的路径对应关系，以及克服 history 模式下带来的服务器配置问题。

通过掌握以下几点，你将能够从容应对绝大多数微前端的路由挑战：

1. 动态设置 base 路径，实现主应用和微应用的无缝兼容。

2. 配置服务器，以支持 history 模式的路由回退。

3. 遵循 Vue 的数据响应式原则，确保 API 数据能够正确渲染。

4. 善用浏览器开发者工具，精确诊断 404、TypeError 等核心问题。

微前端的实践之路充满挑战，但通过系统性的理解和正确的调试方法，你可以构建出健壮、可维护、可扩展的现代化前端应用。

问题思考 ?

1. 模式是history模式
2. 微应用加载成功
3. 子路由的mounted函数执行成功
4. 测试过将子路由页面全部静态化, 只展示文案

基于以上四点情况, 子路由依然是空白页面, 欢迎交流~