前端聚合系统【qiankun】(集成用户权限、布局风格)

概述

主系统采用乾坤集成react技术栈，子系统技术栈不限，docker部署;
乾坤

预览

技术栈：

• 主系统：React + Antd + qiankun
• 子系统：Vue

演示地址

系统演示地址
github仓库（主应用，子应用在github个人主页可以看到）

系统截图

主系统设计

框架搭建

1. 系统基础搭建

// 脚手架创建基础代码
npx create-react-app simple-main-app-web
// 暴露配置(能更好的优化webpack打包)
npm run eject

2. qiankun常用api
   a. registerMicroApps服务注册

registerMicroApps

const app1 = [
    {
        name: 'app1',                 // 微服务名：需要和子系统中package.json中的name保持一致
        entry: '//localhost:8080',    // 微服务系统地址：子系统入口地址(注意：采坑点)
        container: '#container',      // 子系统需要挂载的节点
        activeRule: '/react',         // 子系统的触发规则可以自定义函数(见genActiveRule)
    }
]
function genActiveRule(routerPrefix) {
    return location => location.pathname.startsWith(routerPrefix);
}
registerMicroApps(app1, {
        beforeLoad: [
            app => {},
        ],
        beforeMount: [
            app => {},
        ],
        afterUnmount: [
            app => {},
        ],
    });

b. start主应用启动

start

// 自定义请求方式
const request = url =>  {return fetch(url, {referrerPolicy: 'origin-when-cross-origin'})};
start({ prefetch: true, fetch: request });

c. setDefaultMountApp设置默认应用