微前端qiankun从搭建到部署的实践总结

为什么要用qiankun

项目有个功能需求是需要内嵌公司内部的一个现有工具,该工具是独立部署的且是用React写的,而我们的项目主要技术选型是vue,因此需要考虑嵌入页面的方案。主要有两条路:

  • iframe方案

  • qiankun微前端方案

两种方案都能满足我们的需求且是可行的。iframe方案虽然普通但很实用且成本也低,iframe方案能覆盖大部分的微前端业务需求,而qiankun对技术要求更高一些。

项目架构

参考官方的examples代码,项目根目录下有基座main和其他子应用sub-vuesub-react,搭建后的初始目录结构如下:

├── common     //公共模块
├── main       // 基座
├── sub-react  // react子应用
└── sub-vue    // vue子应用

基座是用vue搭建,子应用有reactvue

基座配置

基座main采用是的Vue-Cli3搭建的,它只负责导航的渲染和登录态的下发,为子应用提供一个挂载的容器div,基座应该保持简洁(qiankun官方demo甚至直接使用原生html搭建),不应该做涉及业务的操作。

qiankun这个库只需要在基座引入,在main.js

你可能感兴趣的:(干货分享,笔记,微前端开发,qiankun)