【qiankun】微前端在项目中的具体使用
1、安装qiankun
npm install qiankun --save
2、主应用中注册和配置qiankun
- 在主应用的入口文件main.ts中，引入qiankun的注册方法：
import { registerMicroApps, start } from 'qiankun';
- 创建一个数组，用于配置子应用的相关信息。每个子应用都需要提供一个名称、入口URL、挂载点和一些可选配置项。例如：
const apiEnv = {dev: 'http://localhost:8081/', // 此处不能使用network，必须用local，不然会报错跨域test: 'http://10.11.12.13/api/',production: 'http://10.11.12.13/api/'
}const apps = [{name: '子应用1',entry: process.env.NODE_ENV === 'development' ? apiEnv.dev : '...根据环境去判断用哪个地址，具体不写了', // 子应用的入口URLcontainer: '#subcontainer', // 子应用的挂载点activeRule: '/sub-app1', // 子应用的激活规则，就是子应用的公共路径，设置在createHistory里面的那个},{name: '子应用2',entry: 'http://localhost:8082',container: '#subcontainer',activeRule: '/sub-app2',},// 其他子应用的配置
];
- 调用 registerMicroApps 方法，注册子应用：
registerMicroApps(apps, {// qiankun 生命周期钩子 - 微应用加载前beforeLoad: (app) => {console.log('before load', app.name);return Promise.resolve();},// qiankun 生命周期钩子 - 微应用挂载后afterMount: (app) => {console.log('after mount', app.name);return Promise.resolve();}
});
- 调用 start 方法，启动qiankun微前端应用：
start({sandbox: {experimentalStyleIsolation: false}
});
- 在主应用的根文件里面，要放一个子应用的容器
<template><div id="app"><Header /><div id="container"><Menu v-if="breadCrumbList.length" /><main :id="isSub.length ? 'main' : 'included'"><BreadCrumb v-if="breadCrumbList.length"/><router-view :key="$route.path" ></router-view><section id="commonContainer" v-if="!breadCrumbList.length"></section></main> </div></div>
</template><script>
import Menu from "./layout/Menu.vue";
import Header from "./layout/Header.vue";
import BreadCrumb from "./layout/BreadCrumb";
export default {name: "App",components: {Menu,Header,BreadCrumb,},computed: {isSub() {// vue2写法写起来比较方便，就这样先举例了return this.$route.matched;},},
};
</script>
3、子应用中配置qiankun
- 安装qiankun
- 在main.ts中配置
// Element-plus
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
// Element Plus 组件 默认 使用英语
import zhCn from 'element-plus/es/locale/lang/zh-cn'
// Element-plus图标引入
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// Echarts依赖引入
import * as echarts from 'echarts'
// 引入d3
import * as d3 from 'd3';
// 阿里字体
import "./assets/font/iconfont.css";
import './public-path';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';
import { getLocationParams } from "@/utils/common.js"// @ts-ignore
let router = null;
let instance = null;
let history = null;// @ts-ignore
function render(props = {}) {// @ts-ignoreconst { container } = props;// @ts-ignorehistory = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/mainapp/subapp' : '/subapp');// history = createWebHistory();router = createRouter({history,// @ts-ignoreroutes,});// 由于登录页面是用的统一页面，所有登录逻辑放在了导航守卫里面router.beforeEach(async(to, from, next) => {const token = localStorage.getItem('token')if (token) {}else {if (getLocationParams("id_token")) {localStorage.setItem("token", getLocationParams("id_token"));await store.dispatch('getUserInfo')next()}else {store.dispatch('login')}}next()})instance = createApp(App);instance.use(router).use(store).use(ElementPlus, {locale: zhCn,});instance.mount(container ? container.querySelector('#apm') : '#apm');// 全局引入element-plus图标库for (const [key, component] of Object.entries(ElementPlusIconsVue){instance.component(key, component)}
}
// 独立运行时:项目不在乾坤中调用则独立运行
// @ts-ignore
if (!window.__POWERED_BY_QIANKUN__) {render();
}
function storeTest(props) {props.onGlobalStateChange &&props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev),true,);props.setGlobalState &&props.setGlobalState({ignore: props.name,user: {name: props.name,},});
}
/*** bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。* 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。*/
// @ts-ignore
export async function bootstrap() {console.log('%c%s', 'color: green;', 'vue3.0 app bootstraped');
}
// 应用每次进入都会调用 mount 方法，通常我们在这里触发应用的渲染方法
export async function mount(props) {console.log('%c%s', 'color: green;',"子应用挂载")storeTest(props);render(props);instance.config.globalProperties.$onGlobalStateChange = props.onGlobalStateChange;instance.config.globalProperties.$setGlobalState = props.setGlobalState;
}
// 应用每次 切出/卸载 会调用的方法，通常在这里我们会卸载微应用的应用实例
export async function unmount() {console.log('%c%s', 'color: red;',"子应用卸载")instance.unmount();instance._container.innerHTML = '';instance = null;// 销毁路由，不然下次进入子应用时，不显示首页，而是展示上次定位的路由页面router = null;history.destroy();
}
- src下新建public-path.ts
// 为了静态资源的引入
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
qiankun的用处：
- 微前端架构：可以将多个独立的应用程序合成一个整体，实现多个团队并行开发、独立部署和运行，提高开发效率和灵活性。
- 独立运行：每个独立的前端应用程序都可以在自己开发环境中进行开发和测试，然后独立部署和运行，这样可以避免应用之间的相互影响和冲突，提高可靠性和稳定性。
- 共享资源：qiankun提供了资源共享的机制，可以将公共的依赖库和资源进行统一管理，避免重复加载和浪费。这样可以减少页面加载时间和资源占用，提高性能和用户体验。
- 动态加载：qiankun支持动态加载子应用，可以根据需要进行按需加载和卸载。这样可以减少初始加载时间和资源占用，提高页面响应速度。
- 跨框架支持：qiankun不仅支持Vue.js，还支持其他主流的前端框架，例如React和Angular。这样可以实现不同框架之间的协同工作，提高开发团队的灵活性和选择性