微前端qiankun（vue）创建项目教程

一、什么是微前端？

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端借鉴了微服务的架构理念，将一个庞大的前端应用拆分为多个独立灵活的小型应用，每个应用都可以独立开发、独立运行、独立部署，再将这些小型应用联合为一个完整的应用。微前端既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。

二、特性

技术栈无关 主框架不限制接入应用的技术栈，子应用可自主选择技术栈
独立开发/部署 各个团队之间仓库独立，单独部署，互不依赖
增量升级 当一个应用庞大之后，技术升级或重构相当麻烦，而微应用具备渐进式升级的特性
独立运行时 微应用之间运行时互不依赖，有独立的状态管理
提升效率 应用越庞大，越难以维护，协作效率越低下。微应用可以很好拆分，提升效率

三、目前可用的微前端方案

微前端的方案目前有以下几种类型：

基于 iframe 完全隔离的方案

作为前端开发，我们对 iframe 已经非常熟悉了，在一个应用中可以独立运行另一个应用。它具有显著的优点：

1. 非常简单，无需任何改造
2. 完美隔离，JS、CSS 都是独立的运行环境
3. 不限制使用，页面上可以放多个 iframe 来组合业务

当然，缺点也非常突出：

1. 无法保持路由状态，刷新后路由状态就丢失
2. 完全的隔离导致与子应用的交互变得极其困难，只能采用postMessage方式。
3. iframe 中的弹窗无法突破其本身
4. 整个应用全量资源加载，加载太慢

这些显著的缺点也催生了其他方案的产生。

基于 single-spa 路由劫持方案

single-spa 是社区公认的主流方案，可以基于它做二次开发。

通过劫持路由的方式来做子应用之间的切换，但接入方式需要融合自身的路由，有一定的局限性。
阿里 qiankun
qiankun 对 single-spa 做了一层封装。主要解决了 single-spa 的一些痛点和不足。通过 import-html-entry 包解析 HTML 获取资源路径，然后对资源进行解析、加载。

qiankun 可以用于任意 js 框架，微应用接入像嵌入一个 iframe 系统一样简单。qiankun@2.0 将跳出 route-based 的微前端场景。

优点

1. 阿里团队开发维护，文档多。
2. 基于single-spa 封装，提供了更加开箱即用的 API。
3. HTML Entry 接入方式，让你接入微应用像使用 iframe 一样简单。
4. 样式隔离，确保微应用之间样式互相不干扰。
5. JS 沙箱，确保微应用之间 全局变量/事件 不冲突。
6. 资源预加载，在浏览器空闲时间预加载未打开的微应用资源，加速微应用打开速度。
7. umi 插件，提供了@umijs/plugin-qiankun 供 umi 应用一键切换成微前端架构系统。
8. 兼容IE11

缺点

1. 上线部署文档较少
2. qiankun 只能解决子项目之间的样式相互污染，不能解决子项目的样式污染主项目的样式

微前端qiankun（vue）使用教程

创建主应用

创建文件夹vue-qiankun。创建主应用和子应用都是在该文件夹创建
vue脚手架创建应用命令：
执行命令：

vue create mian

创建子应用

创建子应用和创建主应用的方法一样，就是项目名称不一样。 本人主应用的文件夹名称为mian，子应用名称为subapp

主应用安装qiankun

安装命令:

npm i qiankun -S

主应用配置

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false


//qiankun配置
import { registerMicroApps, start } from 'qiankun';

//子应用列表
let apps = [
  {
    name:'subapp',
    entry:'//localhost:8080',//子应用的地址，这里演示是本地启动的地址。
    container:'#app',//子应用的容器节点的选择器（vue一般为app）
    activeRule:'/subapp',//访问子应用的规则，比如：主应用为localhost:8081，那访问该子应用的url应为localhost:8081/subapp
  }
]

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

//启动
start();

new Vue({
  render: h => h(App),
}).$mount('#app')

子应用配置

根目录创建public-path.js文件

//public-path.js

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

main.js

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();
}

export async function bootstrap() {
  console.log('[vue] vue app bootstraped');
}
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;
}

本地启动主应用和子应用

这里先启动子应用，因为主应用的main.js的apps设置的是8080端口。

//子应用列表
let apps = [
  {
    name:'subapp',
    entry:'//localhost:8080',//子应用的地址，这里演示是本地启动的地址。
    container:'#app',//子应用的容器节点的选择器（vue一般为app）
    activeRule:'/subapp',//访问子应用的规则，比如：主应用为localhost:8081，那访问该子应用的url应为localhost:8081/subapp
  }
]

解决跨域问题

qiankun官网早就给出来了 https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%BA%94%E7%94%A8

作者：生辰八字
链接：https://juejin.cn/post/7007714510186217508
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
作者：huangpb0624
链接：https://blog.csdn.net/huangpb123/article/details/123215785
来源：csdn
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。