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

置顶随风小薇

已于 2022-05-19 16:38:16 修改

阅读量1.1k

点赞数 1

分类专栏：干货分享笔记文章标签：微前端开发 qiankun

于 2021-08-04 14:45:20 首次发布

本文为博主原创文章，未经博主允许不得转载

本文链接：https://blog.csdn.net/qq_39197547/article/details/119383813

版权

13 篇文章 0 订阅 ¥299.90 ¥99.00

订阅专栏

47 篇文章 1 订阅

订阅专栏

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

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

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

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

基座是用vue搭建，子应用有react和vue。

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

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

了解本专栏

关注