qiankun 踩坑之旅（一）

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。

最近公司的中台项目准备升级微前端，经过leader的深思熟虑后决定选用qiankun、子应用使用ant-design-pro模板搭建。

微前端价值

• 技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权
• 独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
• 增量升级 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
• 独立运行时 每个微应用之间状态隔离，运行时状态不共享

主应用实现

主应用代码很简单

import { registerMicroApps, start } from 'qiankun'
registerMicroApps(
{
    name: 'react app', // app name registered
    entry: '//localhost:7100',
    container: '#yourContainer',
    activeRule: '/yourActiveRule',
  },
)

start()

微应用实现

微应用使用 ant-design-pro 模板，直接安装 # @umijs/plugin-qiankun, 配置开启。

1. yarn add @umijs/plugin-qiankun -D
2. 配置 qiankun 开启。

export default {
  qiankun: {
    slave: {},
  },
};

子应用路由跳转404问题

问题：项目搭建后，分别启动主应用和子应用，在主应用中成功加载子应用，准备以为可以顺利收工的时候，发现在子应用路由切换后，页面会变成404页面。

解决方法：经过一番debug后，发现导致问题的原因为，主应用的路由服务端下发，在路由守卫中惰性注册，子应用跳转路由未注册导致加载主应用404页面。

在主应用中跳转子应用页面不刷新

问题：主应用中跳转子应用第一次成功加载，继续点击子应用其他菜单，浏览器中 url 变化，页面不刷新，在子应用中增加 hashchange事件监听，发现没有触发 hashchagne 事件。

解决方法：经过定位，主应用中路由守卫代码都正常执行，结果 hashchange 事件没有触发，经过调试在路由守卫增加如下代码解决问题

router.beforeEach((to, from, next) => {
    // 增加手动跳转逻辑
    location.assign(`${location.origin}${location.pathname}#${to.path}`)
    next()
})

微前端踩坑旷日持久，后面会不断更新，如果能解决你的问题，帮忙点个赞呗！