Browse Source

精简代码,删除微前端qiankun依赖,需要此代码的请手工解开

zhangdaiscott 2 years ago
parent
commit
04cdd70ee2
5 changed files with 141 additions and 144 deletions
  1. 0 3
      package.json
  2. 8 8
      src/layouts/default/content/index.vue
  3. 22 22
      src/qiankun/apps.ts
  4. 73 73
      src/qiankun/index.ts
  5. 38 38
      src/qiankun/state.ts

+ 0 - 3
package.json

@@ -51,7 +51,6 @@
     "echarts": "^5.2.1",
     "enquire.js": "^2.1.6",
     "intro.js": "^4.2.2",
-    "js-cookie": "^2.2.1",
     "lodash-es": "^4.17.21",
     "md5": "^2.3.0",
     "mockjs": "^1.1.0",
@@ -59,7 +58,6 @@
     "path-to-regexp": "^6.2.0",
     "pinia": "2.0.0-rc.14",
     "print-js": "^1.6.0",
-    "qiankun": "^2.5.1",
     "qrcode": "^1.4.4",
     "qrcodejs2": "0.0.2",
     "resize-observer-polyfill": "^1.5.1",
@@ -232,7 +230,6 @@
         "path-to-regexp",
         "pinia",
         "print-js",
-        "qiankun",
         "qrcode",
         "qs",
         "resize-observer-polyfill",

+ 8 - 8
src/layouts/default/content/index.vue

@@ -13,7 +13,7 @@
   import { useRootSetting } from '/@/hooks/setting/useRootSetting';
   import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
   import { useContentViewHeight } from './useContentViewHeight';
-  import registerApps from '/@/qiankun';
+  // import registerApps from '/@/qiankun';
   import { useGlobSetting } from '/@/hooks/setting';
   export default defineComponent({
     name: 'LayoutContent',
@@ -26,13 +26,13 @@
       const openQianKun = globSetting.openQianKun;
       useContentViewHeight();
       onMounted(() => {
-        //注册openQianKun
-        if (openQianKun == 'true') {
-          if (!window.qiankunStarted) {
-            window.qiankunStarted = true;
-            registerApps();
-          }
-        }
+        // //注册openQianKun
+        // if (openQianKun == 'true') {
+        //   if (!window.qiankunStarted) {
+        //     window.qiankunStarted = true;
+        //     registerApps();
+        //   }
+        // }
       });
       return {
         prefixCls,

+ 22 - 22
src/qiankun/apps.ts

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

+ 73 - 73
src/qiankun/index.ts

@@ -1,73 +1,73 @@
-/**
- * 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();
-    //微应用触发的路由规则
-    // @ts-ignore
-    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: [
-      // @ts-ignore
-      (loadApp) => {
-        console.log('before load', loadApp);
-      },
-    ],
-    beforeMount: [
-      // @ts-ignore
-      (mountApp) => {
-        console.log('before mount', mountApp);
-      },
-    ],
-    afterMount: [
-      // @ts-ignore
-      (mountApp) => {
-        console.log('before mount', mountApp);
-      },
-    ],
-    afterUnmount: [
-      // @ts-ignore
-      (unloadApp) => {
-        console.log('after unload', unloadApp);
-      },
-    ],
-  });
-  // 设置默认子应用,与 genActiveRule中的参数保持一致
-  // setDefaultMountApp();
-  // 第一个微应用 mount 后需要调用的方法,比如开启一些监控或者埋点脚本。
-  runAfterFirstMounted(() => console.log('开启监控'));
-  // 添加全局的未捕获异常处理器。
-  addGlobalUncaughtErrorHandler((event) => console.log(event));
-  // 定义全局状态
-  initGlState();
-  //启动qiankun
-  start({});
-}
-
-export default registerApps;
+// /**
+//  * 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();
+//     //微应用触发的路由规则
+//     // @ts-ignore
+//     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: [
+//       // @ts-ignore
+//       (loadApp) => {
+//         console.log('before load', loadApp);
+//       },
+//     ],
+//     beforeMount: [
+//       // @ts-ignore
+//       (mountApp) => {
+//         console.log('before mount', mountApp);
+//       },
+//     ],
+//     afterMount: [
+//       // @ts-ignore
+//       (mountApp) => {
+//         console.log('before mount', mountApp);
+//       },
+//     ],
+//     afterUnmount: [
+//       // @ts-ignore
+//       (unloadApp) => {
+//         console.log('after unload', unloadApp);
+//       },
+//     ],
+//   });
+//   // 设置默认子应用,与 genActiveRule中的参数保持一致
+//   // setDefaultMountApp();
+//   // 第一个微应用 mount 后需要调用的方法,比如开启一些监控或者埋点脚本。
+//   runAfterFirstMounted(() => console.log('开启监控'));
+//   // 添加全局的未捕获异常处理器。
+//   addGlobalUncaughtErrorHandler((event) => console.log(event));
+//   // 定义全局状态
+//   initGlState();
+//   //启动qiankun
+//   start({});
+// }
+//
+// export default registerApps;

+ 38 - 38
src/qiankun/state.ts

@@ -1,38 +1,38 @@
-/**
- *公共数据
- */
-import { initGlobalState } from 'qiankun';
-import { store } from '/@/store';
-import { router } from '/@/router';
-import { getToken } from '/@/utils/auth';
-//定义传入子应用的数据
-export function getProps() {
-  return {
-    data: {
-      publicPath: '/',
-      token: getToken(),
-      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);
-    console.info('prev', prev);
-    for (const key in newState) {
-      console.info('onGlobalStateChange', key);
-    }
-  });
-}
+// /**
+//  *公共数据
+//  */
+// import { initGlobalState } from 'qiankun';
+// import { store } from '/@/store';
+// import { router } from '/@/router';
+// import { getToken } from '/@/utils/auth';
+// //定义传入子应用的数据
+// export function getProps() {
+//   return {
+//     data: {
+//       publicPath: '/',
+//       token: getToken(),
+//       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);
+//     console.info('prev', prev);
+//     for (const key in newState) {
+//       console.info('onGlobalStateChange', key);
+//     }
+//   });
+// }