qiankun 使用

最新推荐文章于 2025-03-23 19:04:17 发布

忙的慌

最新推荐文章于 2025-03-23 19:04:17 发布

阅读量350

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/mangdehuang/article/details/129880917

版权

qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略

微前端

技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权
独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
增量升级在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
独立运行时每个微应用之间状态隔离，运行时状态不共享

qiankun

qiankun 对于用户而言只是一个类似 jQuery 的库，你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计，使得微应用的接入像使用 iframe 一样简单。

微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用，而 qiankun 的诸多设计均是秉持这一原则，如 HTML entry、沙箱、应用间通信等。

特性

基于spa的封装
技术栈无关不论是 React/Vue/Angular/JQuery 还是其他等框架
html entry接入方式
样式隔离
js沙箱
资源预加载在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度
umi插件提供了 @umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统

使用（都是vue2的情况）

创建一个基座应用可以是vue-cli创建

修改基座应用

增加micro.js文件用来注册微应用

import { registerMicroApps, start } from 'qiankun';


registerMicroApps([
  {
    name: 'vueApp',
    entry: '//localhost:8081',
    container: '#container',//主应用的dom 用于挂载微应用的节点
    activeRule: '/app-vue',//访问地址   http://localhost:8080/app-vue
  },
]);

start();//启动微应用

引入文件启动微应用

<template>
  <div id="app">
   {/* 微应用挂载点 */}
    <div id="container"></div>
  </div>
</template>

<script>
import "./components/micro";
export default {
  name: "App",
};
</script>

<style>
</style>

微应用配置

vue.config.js 修改打包方式
用于跨域访问

const { name } = require('./package');
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: 'umd', // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};

微应用静态资源配置

if (window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
  }

微应用生命周期函数配置
微应用挂载到指定节点下面的 app节点上

import './public-path';
import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

let instance = null;
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    render: (h) => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app');
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}


/**
 * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。
 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。
 */
export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
/**
 * 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
 */
export async function mount(props) {
  console.log('[vue] props from main framework', props);
  render(props);
}
/**
 * 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
 */
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
}

/**
 * 可选生命周期钩子，仅使用 loadMicroApp 方式加载微应用时生效
 */
export async function update(props) {
  console.log('update props', props);
}

iframe

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

其实这个问题之前这篇也提到过，这里再单独拿出来回顾一下好了。

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

参考：
https://www.yuque.com/kuitos/gky7yw
https://zhuanlan.zhihu.com/p/78362028