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 : '...根据环境去判断用哪个地址，具体不写了', // 子应用的入口URL
container: '#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-ignore
const {
container } = props;
// @ts-ignore
history = createWebHistory(window.__POWERED_BY_QIANKUN__ ? '/mainapp/subapp' : '/subapp');
// history = createWebHistory();
router = createRouter({
history,
// @ts-ignore
routes,
});
// 由于登录页面是用的统一页面，所有登录逻辑放在了导航守卫里面
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。这样可以实现不同框架之间的协同工作，提高开发团队的灵活性和选择性