index.ts 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. /**
  2. * qiankun配置
  3. */
  4. import { loadMicroApp } from 'qiankun';
  5. import { apps } from './apps';
  6. import { getProps } from './state';
  7. const activeApps = {};
  8. /**
  9. * 重构apps
  10. */
  11. function filterApps() {
  12. apps.forEach((item) => {
  13. //主应用需要传递给微应用的数据。
  14. item['props'] = getProps();
  15. console.log('主应用给子应用传的数据', item.props);
  16. //微应用触发的路由规则
  17. // @ts-ignore
  18. item.activeRule = item.activeRule.startsWith('/') ? item.activeRule : `/${item.activeRule}`;
  19. });
  20. return apps;
  21. }
  22. const mountMicroApp = (path, toPath?) => {
  23. const microApps = filterApps();
  24. const app = microApps.find((item) => path.startsWith(item['activeRule']));
  25. debugger;
  26. if (app) {
  27. if (activeApps[app['activeRule']]) {
  28. return;
  29. }
  30. const instance = activeApps[app['activeRule']];
  31. console.log('子应用实例--------------->', instance);
  32. if (instance) {
  33. instance.update();
  34. } else {
  35. if (toPath) {
  36. app['props']['data']['publicPath'] = toPath;
  37. }
  38. activeApps[app['activeRule']] = loadMicroApp(app, {
  39. fetch(url, ...args) {
  40. // 给指定的微应用 entry 开启跨域请求
  41. if (url === 'http://1.1.1.3:89/cookie/flash.js') {
  42. return window.fetch(url, {
  43. ...args,
  44. headers: {
  45. 'Access-Control-Allow-Origin': '*',
  46. },
  47. mode: 'cors',
  48. credentials: 'include',
  49. });
  50. }
  51. return window.fetch(url, ...args);
  52. },
  53. }); // 手动加载子应用
  54. }
  55. }
  56. };
  57. // 卸载app的方法
  58. const unmountMicroApps = async (multipleApp) => {
  59. debugger;
  60. for (const key in activeApps) {
  61. const isExist = multipleApp.some((name) => name == key);
  62. if (isExist) {
  63. activeApps[key].unmount();
  64. activeApps[key] = null;
  65. delete activeApps[key];
  66. }
  67. }
  68. };
  69. export { mountMicroApp, unmountMicroApps, activeApps };