qiankun从搭建到部署的实践总结"/>
微前端qiankun从搭建到部署的实践总结
为什么要用qiankun
项目有个功能需求是需要内嵌公司内部的一个现有工具,该工具是独立部署的且是用React
写的,而我们的项目主要技术选型是vue
,因此需要考虑嵌入页面的方案。主要有两条路:
-
iframe
方案 -
qiankun
微前端方案
两种方案都能满足我们的需求且是可行的。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
更多推荐
微前端qiankun从搭建到部署的实践总结
发布评论