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