基于qiankun.js的微前端应用实战

背景：在项目开发中，有这样的需求，多个项目要通过统一的门户网站加载出来，该统一门户网站只显示相应按钮进行菜单导航切换

qiankun.js介绍：
qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。参考：: 介绍-qiankun

优势
技术栈无关；独立开发、部署；增量升级；独立运行状态隔离
Why Not Iframe

使用：
主应用：主应用里调用app注册微应用，并通过star启动
安装qiankun

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

在src目录新建qiankun文件夹，并在里面新建一个index.js用于编写注册微应用代码

initQiankun方法

export const initQiankun = () => {if (!window.qiankunStarted) {window.qiankunStarted = trueconsole.log('env', import.meta.env)// console.log('store.', store.state.user)let state = {accessToken: '',userInfo: {}}const actions = initGlobalState(state)// 这里监听子应用传过来的数据，暂时用不到// actions.onGlobalStateChange((state, prev) => {//   // state: 变更后的状态; prev 变更前的状态//   console.log('更改后的状态', state, prev);// });registerMicroApps([{name: 'hzzg_web_cockpit',entry: import.meta.env.VITE_APP_hzzg_web_cockpit_url,activeRule: 'hzzg_web_cockpit',container: '#hzzg_web_cockpit',props: {userInfo: localStorage.getItem('userInfo') && (JSON.parse(localStorage.getItem('userInfo')) || {}),accessToken: localStorage.getItem('accessToken') || '',actions: actions}},{name: 'activity-guarantee',entry: import.meta.env.VITE_APP_activity_guarantee,activeRule: 'activityGuarantee',container: '#activityGuarantee',props: {userInfo: localStorage.getItem('userInfo') && (JSON.parse(localStorage.getItem('userInfo')) || {}),accessToken: localStorage.getItem('accessToken') || '',actions: actions}}]);
}

接口解释：
registerMicroApps(apps, lifeCycles?)
apps - Array RegistrableApp - 必选，微应用的一些注册信息
RegistrableApp

 {name: 'hzzg_web_cockpit',entry: import.meta.env.VITE_APP_hzzg_web_cockpit_url,activeRule: 'hzzg_web_cockpit',container: '#hzzg_web_cockpit',props: {userInfo: localStorage.getItem('userInfo') && (JSON.parse(localStorage.getItem('userInfo')) || {}),accessToken: localStorage.getItem('accessToken') || '',actions: actions}},

name: 微应用的名称，微应用之间保持唯一，此name必须和微应用package.json中的name字段保持一致，见后文微应用的打包配置，output中的library取值为package.json中的name

entry: 配置为字符串时，表示微应用的访问地址
activeRule: 微应用的激活规则，直接跟 url 中的路径部分做前缀匹配，匹配成功表明当前应用会被激活。在浏览器 url 发生变化会调用 activeRule 里的规则
props:主应用要传递给微应用的数据，后面会讲到微应用如何接收数据
container:微应用的容器节点的选择器，即要把微应用挂载到主应用的哪个dom节点下
如我的主应用项目配置container: ‘#hzzg_web_cockpit’，则对应主应用app.vue中对应有di=“hzzg_web_cockpit”

<template><div><Bar v-if="isShow" /><div id="hzzg_web_cockpit"></div><div id="central_big_screen"></div><div id="muckmanage"></div><div id="largeScreen"></div><div id="hzGgmxjtDp"></div><div id="linjunjie"></div><div id="municipal"></div><div id="activityGuarantee"></div><div id="mcsScreen"></div><router-view></router-view><Footer v-if="isShow" /></div>
</template>

startQiankun方法，调用此方法启动qiankun

export const startQiankun = () => {start({singular: false,sandbox: {// strictStyleIsolation: true,// experimentalStyleIsolation: true, //   开启沙箱模式,实验性方案},})
}

方法写好后在哪里调用呢，本项目是在用户登录获取到用户信息后调用的initQiankun，然后调用startQiankun。至此，主应用的配置已经完成。
微应用
微应用的配置主要分为四步
1、在src目录新增public-path.js文件，用于修改运行时的 publicPath
public-path.js内具体代码如下：

if (window.__POWERED_BY_QIANKUN__) {console.log('微应用启动', window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__)__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2、在入口文件最顶部引入 public-path.js，修改并导出三个生命周期函数，主应用传递通过props传递过来的数据可以在render函数中获得const { container, accessToken, userInfo, actions } = props，userInfo和accessToken就是主应用传递过来的用户信息

import './public-path'
function render(props = {}) {const { container, accessToken, userInfo, actions } = props;if (window?.__POWERED_BY_QIANKUN__) {// eslint-disable-next-line no-consoleconsole.log('props', props);}instance = new Vue({router,store,render: (h) => h(App),}).$mount(container ? container.querySelector('#app') : '#app');
}// 独立运行时
if (!window?.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {// eslint-disable-next-line no-consoleconsole.log('[vue] vue app bootstraped');
}
export async function mount(props) {// props.setGlobalState(state);render(props);
}
export async function unmount() {instance.$destroy();instance.$el.innerHTML = '';instance = null;// router = null;
}

3、打包配置修改（vue.config.js）

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

实际应用中会有各种坑，附上官方各种问题解决方案qiankun.js常见问题解决方案
纸上得来终觉浅，绝知此事要躬行

基于qiankun.js的微前端应用实战相关推荐

基于qiankun搭建ng-alain15微前端项目示例实践
基础环境实践日期:2023-03-04 ng versionAngular CLI: 15.2.1 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
基于qiankun搭建ng-alain15微前端项目入门实践
基础环境实践日期:2023-02-22 ng versionAngular CLI: 15.1.6 Node: 18.14.2 Package Manager: npm 9.5.0 OS: win3 ...
qiankun 微前端_基于qiankun落地部署微前端爬”坑“记
❝ 前沿:前半年微前端火得一踏糊涂,刚好业务需求上有这样的应用场景,针对目前的微前端解决方案做了技术选型,qiankun作为蚂蚁金服内部孵化出来的微前端解决方案,经过线上应用充分检验及打磨最后开源,最 ...
基于qiankun落地部署微前端爬”坑“记
前沿:前半年微前端火得一踏糊涂,刚好业务需求上有这样的应用场景,针对目前的微前端解决方案做了技术选型,qiankun作为蚂蚁金服内部孵化出来的微前端解决方案,经过线上应用充分检验及打磨最后开源,最终选 ...
基于 iframe 的全新微前端方案
作者:damyxu,腾讯 PCG 前端开发工程师 iframe是一个天然的微前端方案,但受限于跨域的严格限制而无法很好的应用,本文介绍一种基于 iframe 的全新微前端方案,继承iframe的优点, ...
基于Git子模块的微前端项目管理和公用组件库方案
基于Git子模块的微前端项目管理方案 1. 媒体项目从单一项目到多项目的转变及问题随着前端媒体业务的急剧扩大,传统的单体应用已经变得难以维护,由此,这几年我们一直在探索对大型复杂项目的拆分工作. 一 ...
使用 React 和 Next.js 的微前端
处理大型项目并管理其代码库对团队来说可能是一个巨大的挑战.尽管微前端已经出现了一段时间,但由于其独特的功能和可用性,它们越来越受欢迎. 微前端特别有用,因为多个团队可以在同一个项目的各个模块上工作,而 ...
微前端项目实战及原理
背景使用微前端在项目中主要是解决使用iframe引入第三方页面时遇到的框架受限,页面交互不统一等问题,项目中遇到的问题大概如下: iframe 内部路由跳转,不会影响到外部的路由地址,无法记住当前访 ...
基于umijs/plugin-qiankun 的微前端配置（vue+umi）
一,umijs/plugin-qiankun 特点 ✔︎ 基于 qiankun ✔︎ 支持主应用和子应用都用 umi ✔︎ 支持通过组件引入子应用 ✔︎ 父子应用通讯 ✔︎ 子应用运行时配置自定义 ...

基于qiankun.js的微前端应用实战

基于qiankun.js的微前端应用实战相关推荐

最新文章

热门文章