背景今天盘点一下qiankun父子应用的通信方式都有哪些，我发现了5种。1、localStorage/sessionStorage2、通过路由参数共享3、官方提供的props4、官方提供的actions5、使用vuex或redux管理状态，通过shared分享接下来我们一个一个进行说明1、localStorage/sessionStorage有人说这个方案必须主应用和子应用是同一个域名下。其实不是的，子应用使用不同的域名也是可以的，因为在qiankun中，主应用是通过fetch来拉取子应用的模板，然后渲染在主应用的dom上的，说白了还是运行在主应用上，所以还是运行在同一个域名上，也就是主应用的
[qiankun]跨域问题线上跨域问题静态资源问题微服务的跨域问题本地跨域localhost主服务加载localhost微服务localhost主服务加载https微服务问题1问题2分析解决方案微服务中交互的跨域问题接口调用微服务复用问题场景描述分析微前端的开发过程中一定会遇到跨域问题因为主服务是一个域名，子服务也分别是不同的域名，因此主应用加载微服务的时候肯定就涉及到了跨域线上跨域问题静态资源问题线上产生了微服务的静态资源加载的跨域问题,该问题可以查看qiankun的图片加载解决方案。其它静态资源加载的问题，例如：并且比较奇怪的是,同样是微服务的静态文件一个加载了，一个失败了,最后发现其实都
一、什么是微前端微前端就是将不同的功能按照不同的未读拆分成多个子应用，通过主应用来加载这些子应用，微前端的核心在于拆，拆完后再合二、为什么使用微前端不同团队间开发一个应用技术栈不同希望每个团队都可以独立开发，独立部署项目中还需要老的应用代码我们可以将一个应用划分成若干哥子应用，将子应用打包成一个个的lib，当路径切换时加载不同的子应用，这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发的问题三、qiankun框架文档地址：https://qiankun.umijs.org/zh2018年Single-SPA诞生了，single-spa是一个用于前端微服务化的JavaScri
最终效果一、前言Wocwin-Admin，是基于Vue3.2、TypeScript、Vite、Pinia、Element-Plus、Qiankun(微前端)开源的一套后台管理模板；同时集成了微前端qiankun也可以当做一个子应用。项目中组件页面使用了Element-plus二次封装t-ui-plus组件，后期会持续追加权限菜单、按钮管理、微前端配置、还需接入Mock数据实现接口调用模式（目前都是静态JSON数据）。二、在线预览Link：https://wocwin.github.io/wocwin-admin/三、项目功能使用Vue3.2+TypeScript开发，单文件使用setup语法糖
[qiankun]实战问题汇总ERRORSyntaxError:Cannotuseimportstatementoutsideamodule问题分析解决方案子应用命名问题问题分析解决方案'jsonpFunction'详细错误信息问题分析解决方案微应用的注册问题`UncaughtError:application'cli5-beta6-test-name'diedinstatusLOADING_SOURCE_CODE:[qiankun]:Targetcontainerwith#childAppnotexistedwhilecli5-beta6-test-nameloading!`分析`singl
前言：我这里的父级应用使用的是react工程，umi。下面两个例子vue2，vue3，作为微应用接入到基座所需调整vue2项目1:安装vue-cli使用vuecreateXXX(xxx是你的项目名称)命令创建项目，安装的时候选择vue22：改造main.js：子应用需要在自己的入口文件导出bootstrap、mount、unmount三个生命周期钩子，以供主应用在适当的时机调用。bootstrap：只会在子应用初始化的时候调用一次，下次子应用重新进入时会直接调用mount钩子，不会再重复触发bootstrap。通常我们可以在这里做一些全局变量的初始化，比如不会在unmount阶段被销毁的应用级
本文章介绍了qiankun在vue3的应用，其中子应用有vue2、vue3、react、angular介绍qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。其他几款（[single-spa]、[micro-app]、[百度emp]]）使用iframe整合系统时，假设我们有系统A,当我们想把系统B引入A系统时，只需要B系统提供一个url给A系统引用即可，这里我们把A系统叫做父应用，把B系统叫做子应用。同样的，微前端也延续了这个概念，微前端在使用起来基本和使用iframe一样平滑。结构主应用(父)，微应用(子)案例一、主应用主应
本文章介绍了qiankun在vue3的应用，其中子应用有vue2、vue3、react、angular介绍qiankun是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。其他几款（[single-spa]、[micro-app]、[百度emp]]）使用iframe整合系统时，假设我们有系统A,当我们想把系统B引入A系统时，只需要B系统提供一个url给A系统引用即可，这里我们把A系统叫做父应用，把B系统叫做子应用。同样的，微前端也延续了这个概念，微前端在使用起来基本和使用iframe一样平滑。结构主应用(父)，微应用(子)案例一、主应用主应
示例代码仓库：yl-qiankun-base:https://gitee.com/dongche/yl-qiankun-base.gityl-qiankun-child-vue:https://gitee.com/dongche/yl-qiankun-child-vue.git微前端概念起源微前端概念最早其实是借鉴了微服务的概念，最早是出现在2016年的ThoughtWorksTechnologyRadar（ThoughtWorks技术雷达）什么是微前端MicroFrontends官方解释：用来构建能够让多个团队独立交付项目代码的现代webapp技术，策略以及实践方法MicroFrontend
示例代码仓库：yl-qiankun-base:https://gitee.com/dongche/yl-qiankun-base.gityl-qiankun-child-vue:https://gitee.com/dongche/yl-qiankun-child-vue.git微前端概念起源微前端概念最早其实是借鉴了微服务的概念，最早是出现在2016年的ThoughtWorksTechnologyRadar（ThoughtWorks技术雷达）什么是微前端MicroFrontends官方解释：用来构建能够让多个团队独立交付项目代码的现代webapp技术，策略以及实践方法MicroFrontend
