精简代码，删除微前端qiankun依赖，需要此代码的请手工解开
zhangdaiscott
parent
9f83a9ea29
commit
04cdd70ee2
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
|
|
|
|||
Loading…
Reference in New Issue