【qiankun】微前端在项目中的具体使用

1、安装qiankun

npm install qiankun --save

2、主应用中注册和配置qiankun

1. 在主应用的入口文件main.ts中，引入qiankun的注册方法：

import { registerMicroApps, start } from 'qiankun';

2. 创建一个数组，用于配置子应用的相关信息。每个子应用都需要提供一个名称、入口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',
  },
  // 其他子应用的配置
];

3. 调用 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();
	}
});

4. 调用 start 方法，启动qiankun微前端应用：

start({
	sandbox: {
		experimentalStyleIsolation: false
	}
});

5. 在主应用的根文件里面，要放一个子应用的容器

<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

1. 安装qiankun
2. 在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();		
}

3. 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。这样可以实现不同框架之间的协同工作，提高开发团队的灵活性和选择性