JeecgBoot 3.1.0 版本发布，基于代码生成器的企业级低代码平台

ant-design-vue-jeecg/src/qiankun/apps.js

@@ -0,0 +1,22 @@
+/**
+ *微应用apps
+ * @name: 微应用名称 - 具有唯一性
+ * @entry: 微应用入口.必选 - 通过该地址加载微应用，
+ * @container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上
+ * @activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用
+ */
+//子应用列表
+const _apps = [];
+for (const key in process.env) {
+    if (key.includes('VUE_APP_SUB_')) {
+        const name = key.split('VUE_APP_SUB_')[1];
+        const obj = {
+            name,
+            entry: process.env[key],
+            container: '#content',
+            activeRule: name,
+        };
+        _apps.push(obj)
+    }
+}
+export const apps = _apps;

ant-design-vue-jeecg/src/qiankun/index.js

@@ -0,0 +1,68 @@
+/**
+ * qiankun配置
+ */
+import {registerMicroApps, setDefaultMountApp, start, runAfterFirstMounted, addGlobalUncaughtErrorHandler} from 'qiankun';
+import {apps} from './apps';
+import {getProps, initGlState} from './state';
+/**
+ * 重构apps
+ */
+function filterApps() {
+    apps.forEach((item) => {
+        //主应用需要传递给微应用的数据。
+        item.props = getProps();
+        //微应用触发的路由规则
+        item.activeRule = genActiveRule('/' + item.activeRule);
+    });
+    return apps;
+}
+
+/**
+ * 路由监听
+ * @param {*} routerPrefix 前缀
+ */
+function genActiveRule(routerPrefix) {
+    return location => location.pathname.startsWith(routerPrefix);
+}
+
+/**
+ * 微应用注册
+ */
+function registerApps() {
+    const _apps = filterApps();
+    registerMicroApps(_apps,
+        {
+            beforeLoad: [
+                loadApp => {
+                    console.log('before load', loadApp);
+                }
+            ],
+            beforeMount: [
+                mountApp => {
+                    console.log('before mount', mountApp);
+                }
+            ],
+            afterMount: [
+                mountApp => {
+                    console.log('before mount', mountApp);
+                }
+            ],
+            afterUnmount: [
+                unloadApp => {
+                    console.log('after unload', unloadApp);
+                }
+            ]
+        });
+    // 设置默认子应用,与 genActiveRule中的参数保持一致
+    // setDefaultMountApp();
+    // 第一个微应用 mount 后需要调用的方法，比如开启一些监控或者埋点脚本。
+    runAfterFirstMounted(() => console.log('开启监控'));
+    // 添加全局的未捕获异常处理器。
+    addGlobalUncaughtErrorHandler(event => console.log(event));
+    // 定义全局状态
+    initGlState();
+    //启动qiankun
+    start({});
+}
+
+export default registerApps;

ant-design-vue-jeecg/src/qiankun/state.js

@@ -0,0 +1,41 @@
+/**
+ *公共数据
+ */
+import {initGlobalState} from 'qiankun';
+import store from '@/store';
+import router from '@/router';
+import Vue from 'vue';
+import {ACCESS_TOKEN} from "@/store/mutation-types"
+
+//定义传入子应用的数据
+export function getProps() {
+  return {
+    data: {
+      publicPath: process.env.BASE_URL,
+      token: Vue.ls.get(ACCESS_TOKEN),
+      store,
+      router
+    }
+  }
+}
+
+/**
+ * 定义全局状态，并返回通信方法,在主应用使用，微应用通过 props 获取通信方法。
+ * @param state 主应用穿的公共数据
+ */
+export function initGlState(info = {userName: 'admin'}) {
+  // 初始化state
+  const actions = initGlobalState(info);
+  // 设置新的值
+  actions.setGlobalState(info);
+  // 注册 观察者 函数 - 响应 globalState 变化，在 globalState 发生改变时触发该 观察者 函数。
+  actions.onGlobalStateChange((newState, prev) => {
+    // state: 变更后的状态; prev 变更前的状态
+    console.info("newState", newState)
+    for (const key in newState) {
+      console.info("onGlobalStateChange", key)
+    }
+  });
+  // 将action对象绑到Vue原型上，为了项目中其他地方使用方便
+  Vue.prototype.$actions = actions;
+}