微前端乾坤（qiankun）初尝试

介绍

qiankun 是一个基于 single-spa 的微前端实现库&＃xff0c;旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。

公司有一个门户网站需要嵌入其他系统&＃xff0c;使用iframe会有很多的兼容性问题&＃xff0c;如果使用qiankun框架&＃xff0c;不仅可以绕过这些iframe的坑&＃xff0c;还可以进行很多的“骚操作”。

快速上手

qiankun官网的快速上手很简单&＃xff0c;不是因为他们懒得写&＃xff0c;而是引入qiankun的确是非常简单。

只需要在主应用中引入qiankun,微服务做相应的配置&＃xff0c;就可以&＃xff0c;下面就介绍我在项目中如何引入。

主应用

• 安装

  npm install -S qiankun


• 在main.js入口文件

  import { registerMicroApps, start } from &＃39;qiankun&＃39;;
const getActiveRule &＃61; (hash) &＃61;> (location) &＃61;> location.hash.startsWith(hash);registerMicroApps([{name: &＃39;TPP&＃39;, entry: &＃39;http://localhost:7000/&＃39;,// 主应用挂载的节点container: &＃39;#TPP&＃39;,// 主应用使用的hash模式activeRule: getActiveRule(&＃39;#/TPP&＃39;),},{name: &＃39;PTP&＃39;, entry: &＃39;http://localhost:7001/&＃39;,// 主应用挂载的节点container: &＃39;#PTP&＃39;,// 主应用使用的hash模式activeRule: getActiveRule(&＃39;#/PTP&＃39;),},
]);
start();


微服务配置&＃xff08; vue/cli3创建应用&＃xff09;

仅针对开发环境

• 微服务入口文件

qiankun会在微应用注入一个全局变量&＃xff0c;用于针对此变量来做一些配置

if (window.__POWERED_BY_QIANKUN__) {
// 如果是正常访问&＃xff0c;则为undefined&＃xff0c;如果是qiankun访问&＃xff0c;则为true__webpack_public_path__ &＃61; window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
function render(props &＃61; {}) {/** props 参数container: 主应用挂载微应用的节点mountParcel: ƒ ()name: "TPP" 微应用nameonGlobalStateChange: ƒ onGlobalStateChange(callback, fireImmediately)setGlobalState: ƒ setGlobalState()singleSpa*/const { container } &＃61; props;const mountPath &＃61; container ? container.querySelector(&＃39;#TPPAPP&＃39;) : &＃39;#TPPAPP&＃39;;window.sfopenpc &＃61; new Vue({render: (h) &＃61;> h(App),store,router,}).$mount(mountPath);
}// 如果正常访问&＃xff0c;则传入空对象&＃xff0c;用于正常的配置
if (!window.__POWERED_BY_QIANKUN__) {render({});
}
// qiankun的生命周期回调
export async function bootstrap() {console.log(&＃39;[vue] vue app bootstraped&＃39;);
}
export async function mount(props) {console.log(&＃39;[vue] props from main framework&＃39;, props);// 如果qiankun框架引入&＃xff0c;则会在页码加载完成之后调用此方法render(props);
}
export async function unmount() {window.sfopenpc.$destroy();window.sfopenpc.$el.innerHTML &＃61; &＃39;&＃39;;window.sfopenpc &＃61; null;// router &＃61; null;
}

• webpack配置&＃xff08;开发环境&＃xff09;
  由于是不同端口&＃xff0c;所以会出现跨域的问题&＃xff0c;所以需要在代理服务器进行配置headers,支持微服务的Access-Control-Allow-Origin

const { name } &＃61; require(&＃39;./package.json&＃39;);
module.exports &＃61; {configureWebpack: {devServer: {headers: {// 本地服务器接受跨域&＃39;Access-Control-Allow-Origin&＃39;: &＃39;*&＃39;,},},},output: {library: &＃96;${name}-[name]&＃96;,libraryTarget: &＃39;umd&＃39;, // 把微应用打包成 umd 库格式,不配置的话&＃xff0c;主应用导入会报错jsonpFunction: &＃96;webpackJsonp_${name}&＃96;,},
}


效果

点击上面的菜单栏进行跳转

已经成功引入。

其他问题

主应用与微应用跳转问题

如果主应用和微应用同时使用hash模式的话&＃xff0c;如果不做特殊处理的话&＃xff0c;就会出现跳转异常。
我这里简单写了一个简单的中间件&＃xff0c;原理是在微应用的入口文件新增一个前缀处理&＃xff0c;使得如果是qiankun框架访问的时候&＃xff0c;自动添加路由跳转前缀的同时&＃xff0c;点击时也会自动重定向对应的前缀。

微应用配置

• 中间件QiankunRouter

import Router from &＃39;vue-router&＃39;;function handleRouter(router, prefix &＃61; &＃39;&＃39;) {if (router.path) {if (router.path &＃61;&＃61;&＃61; &＃39;/&＃39;) {router.path &＃61; &＃96;${prefix}&＃96;;} else {router.path &＃61; &＃96;${prefix}${router.path}&＃96;;}}if (router.children && router.children.length) {for (const r of router.children) {handleRouter(r, prefix);}}
}// eslint-disable-next-line no-unused-vars
function decorate(router, { isQiankun, prefix }) {if (isQiankun) {for (const r of router) {handleRouter(r, prefix);}}return router;
}
export default class QiankunRouter extends Router {constructor(props) {decorate(props.routes, {isQiankun: props.isQiankun,prefix: props.prefix,});super(props);this.isQiankun &＃61; !!props.isQiankun;this.prefix &＃61; props.prefix || &＃39;&＃39;;if (this.isQiankun) {// 注册跳转路由前置&＃xff0c;跳转时自动新增前缀this.qiankunbeForeEach();}}// eslint-disable-next-line no-unused-varsqiankunbeForeEach() {super.beforeEach((to, from, next) &＃61;> {if (this.isQiankun && !to.path.includes(&＃39;/microApp&＃39;)) {if (to.path &＃61;&＃61;&＃61; &＃39;/&＃39;) {next({path: this.prefix,});} else {next({path: &＃96;${this.prefix}${to.path}&＃96;,});}}next();});}
}

• 使用QiankunRouter替换Vue-router

/* eslint-disable no-unused-vars */
import Vue from &＃39;vue&＃39;;
// import router from &＃39;Vue-router&＃39;
import QiankunRouter from &＃39;../qiankun/decorateRouter&＃39;;
// 路由信息
const routes &＃61; [{path:&＃39;/&＃39;,component: () &＃61;> import(&＃39;./qiankun/index&＃39;)
}]Vue.use(QiankunRouter);
const router &＃61; new QiankunRouter({mode: &＃39;hash&＃39;,routes: vuexHoc(routes),// eslint-disable-next-line no-underscore-dangleisQiankun: !!window.__POWERED_BY_QIANKUN__,// 路由跳转前缀prefix: &＃39;/microApp/TPP&＃39;,
});export default router;


主应用配置修改

只需要修改路由信息和qiankun主路由检测路径即可

• qiankun主路由检测路径

const qiankunConfig &＃61; [{name: &＃39;TPP&＃39;,// 访问微应用的跳转首页路径 新增#/microApp/TPP&＃xff0c;匹配的是原来的/entry: &＃39;http://localhost:7001/#/microApp/TPP&＃39;,container: &＃39;#microApp&＃39;,// 主应用hash配置前缀activeRule: getActiveRule(&＃39;#/microApp/TPP&＃39;),}]


• 路由信息

{// 给微应用配置一个固定前缀path: &＃39;/microApp/*&＃39;,name: &＃39;微应用&＃39;,component: () &＃61;> import(&＃39;../views/microApp.vue&＃39;),},


微应用的弹出新窗口

弹出新窗口是可以使用相对路径&＃xff0c;浏览器会自动获取当前的路由信息&＃xff0c;但是如果使用主应用打开的时候打开新窗口就会异常了。
解决方案有如下&＃xff1a;

1. 封装一个跳转窗口的方法&＃xff0c;统一使用该方法进行跳转
2. 如果使用的是标签跳转新窗口的话&＃xff0c;就不能使用相应路径&＃xff0c;而改用URL的绝对路径替换。