qiankun.js配置流程及使用过程中遇到的问题分享

# 为什么使用qiankun框架？

我们项目使用的初衷是为了解决一个后台项目的重构问题，因为项目太过庞大，vue2升级vue3选择了重构，希望可以两个项目并行操作，这也就是我们使用qiankun的理由吧。我想很大原因还是iframe有很大的局限性，导致很多人选择qiankun这种微前端框架吧。

主项目配置

这是我自己根据qiankun框架重新搭建了一个项目，公司的项目不适合放到这里。主项目和子项目都是根据react和webpack进行构建的 

import {} from "react-router-dom";
import {Outlet} from "react-router-dom";
import LeftMenu from './components/layout/LeftMenu';
import { Layout } from 'antd';
import { registerMicroApps, start } from 'qiankun';
import "./index.less";
const { Header, Footer, Sider, Content } = Layout;
export default () => {
    // qiankun框架初始化
  const initQiankunHandler = () => {
    registerMicroApps([
      {
        name: "op-first", // 名字
        entry: "//localhost:3000/", // 需要加载的本地地址，如果放到线上这块需要修改为子项目线上地址
        container: "#firstApp", // 子项目的容器，主项目这个id一定要定义好，不然子项目会没有容器而不显示
        activeRule: "/firstApp" // 这是子项目的路由，访问这种路由开头的时候会访问子项目
        /**
        activeRule: (location: Location) => {
              这里也可以放回一个布尔值告诉qiankun这是主项目路由还是子项目路由
            },
        */ 
      }
    ])
    start()
  }
  React.useEffect(() => {
    initQiankunHandler()
  }, [])