qiankun微前端集成问题

1，首先了解一下什么是微前端？

        微前端就是应用分割，独立运行，独立部署，将原本把所有功能集中于一个项目中的方式转变为把功能按业务划分成一个主项目和多个子项目，每个子项目负责自身功能，同时具备和其它子项目和主项目进行通信的能力，达到更细化更易于管理的目的。总的来说微前端就是一个完整应用划分成一个主应用和一个或多个微应用，应用间相互独立，可相互通信。

2，微前端有什么优势？

2.1、复杂度可控: 每一个UI业务模块由独立的前端团队开发,避免代码巨无霸,保持开发时的高速编译,保持较低的复杂度,便于维护与开发效率。

2.2、独立部署: 每一个模块可单独部署,颗粒度可小到单个组件的UI独立部署,不对其他模块有任何影响。

2.3、技术选型灵活: 主框架不受技术栈的限制，微应用具备完全自主权。

2.4、容错: 单个模块发生错误,不影响全局，就跟后端微服务一样。

2.5、扩展: 每一个服务可以独立横向扩展以满足业务伸缩性，解决资源的不必要消耗。

2.6、独立运行:每个微应用之间状态隔离，运行时状态不共享。

3，构建主应用

        

 3.1：构建完主应用项目后，在主应用安装qiankun，single-spa。

yarn add qiankun single-spa # 或者 npm install  qiankun single-spa

3.2：使用qiankun的registerMicroApps注册微应用

3.3：在主应用中的main.js文件中使用start函数启动微应用，可选择配置项，是否开启沙箱隔离，预加载

3.4：主应用中构建微应用的容器

3.5：主应用中构建微应用的菜单

4，构建微应用

        微应用需要在自己的入口main.js(通常就是你配置的webpack的entry js)导出bootstrap、mount、unmount三个生命周期钩子，以供主应用在适当的时机调用。

4.1：在子应用的main.js中动态设置publiclPath,防止资源加载出错

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

4.2：微应用导出勾子函数

let router = null;
let instance = null;

function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/',
    mode: 'history',
    routes
  });

  instance = new Vue({
    router,
    store,
    render: (h) => h(App)
  }).$mount(container ? container.querySelector('#app') : '#app');
}

//判断其是否作为qiankun子应用使用
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}

//生命周期挂载
export async function mount(props) {
  Vue.prototype.$qiankun = props;
  Vue.prototype.$store = Vue.observable(props.pinia);
  render(props);
}

//销毁
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

        4.3：微应用配置webpack，在vue.config.js中

        4.3.1：配置子应用允许跨域

        4.3.2:把子应用打包成umd格式

        4.3.3:子应用修改permission.js文件