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

pull/170/head
zhangdaiscott 2022-06-22 16:22:56 +08:00
parent 9f83a9ea29
commit 04cdd70ee2
5 changed files with 141 additions and 144 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -1,38 +1,38 @@
/** // /**
* // *公共数据
*/ // */
import { initGlobalState } from 'qiankun'; // import { initGlobalState } from 'qiankun';
import { store } from '/@/store'; // import { store } from '/@/store';
import { router } from '/@/router'; // import { router } from '/@/router';
import { getToken } from '/@/utils/auth'; // import { getToken } from '/@/utils/auth';
//定义传入子应用的数据 // //定义传入子应用的数据
export function getProps() { // export function getProps() {
return { // return {
data: { // data: {
publicPath: '/', // publicPath: '/',
token: getToken(), // token: getToken(),
store, // store,
router, // router,
}, // },
}; // };
} // }
//
/** // /**
* ,使 props // * 定义全局状态,并返回通信方法,在主应用使用,微应用通过 props 获取通信方法。
* @param state 穿 // * @param state 主应用穿的公共数据
*/ // */
export function initGlState(info = { userName: 'admin' }) { // export function initGlState(info = { userName: 'admin' }) {
// 初始化state // // 初始化state
const actions = initGlobalState(info); // const actions = initGlobalState(info);
// 设置新的值 // // 设置新的值
actions.setGlobalState(info); // actions.setGlobalState(info);
// 注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。 // // 注册 观察者 函数 - 响应 globalState 变化,在 globalState 发生改变时触发该 观察者 函数。
actions.onGlobalStateChange((newState, prev) => { // actions.onGlobalStateChange((newState, prev) => {
// state: 变更后的状态; prev 变更前的状态 // // state: 变更后的状态; prev 变更前的状态
console.info('newState', newState); // console.info('newState', newState);
console.info('prev', prev); // console.info('prev', prev);
for (const key in newState) { // for (const key in newState) {
console.info('onGlobalStateChange', key); // console.info('onGlobalStateChange', key);
} // }
}); // });
} // }