qiankun 微前端

qiankun 微前端 框架

为什么不用 iframe

iframe 最大的特性就是提供了浏览器原生的硬隔离方案，不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破，导致应用间上下文无法被共享，随之带来的开发体验、产品体验的问题。

1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
2. UI 不同步，DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框，同时我们要求这个弹框要浏览器居中显示，还要浏览器 resize 时自动居中…
3. 全局上下文完全隔离，内存变量不共享。iframe 内外系统的通信、数据同步等需求，主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

qiankun

官网说的大部分都很详尽我补充一点点

先安装 qiankun ：

$ yarn add qiankun # 或者 npm i qiankun -S

//基座 main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'zone.js/dist/zone';
import router from './router'

Vue.use(ElementUI);
import { 
  registerMicroApps, // 注册应用
  start // 开启方法
 } from 'qiankun'
 const apps = [
  {
    name: 'angularApp',
    entry: '//localhost:4200', 
    container: '#angularApp', 
    activeRule: '/angularApp',
  },
  {
    name: 'angularView',
    entry: '//localhost:7022', 
    container: '#angularView', 
    activeRule: '/angularView',
  },
  {
    name: 'vueApp', // 应用名字
    entry: '//localhost:10001', // 默认会加载这个html 解析里面的js(这里使用的fetch) 动态的执行(子应用必须支持跨域)
    container: '#vue', // 容器名 挂载元素
    activeRule: '/vue', // 激活路径 激活规则(当访问/vue 就把这个应用挂载到#vue上)
    props:{a:1}
  },

]
registerMicroApps(apps); // 注册应用


start({
  prefetch: false // 取消预加载
});// 开启
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App),
}).$mount('#app-base')

微服务

最后成品~~~~Yes

qiankun通讯

https://juejin.cn/post/6844904151231496200

这篇文章讲的很详细【牛】