qiankun-接入umi框架的微应用

不cong明的亚子2024-10-13 12:27

目的

将自己的umi项目作为微应用，移植到自己的主站。

技术栈

微应用：umi应用 (create umi脚手架)
@umijs/max@4.3.24
react@18.x
主应用：react （create-react-app脚手架）
react@18.x
webpack@5.x
sass
node版本 22.x

umi项目中的改动点

.umirc.ts

typescript 复制代码

import { defineConfig } from '@umijs/max';

export default defineConfig({
  ...
  history: {
    type: 'memory',
  },
  // 引入qiankun
  qiankun: {
    slave: {},
  },
});

src/app.ts

typescript 复制代码

...

export const modifyContextOpts = () => {
  return {
    basename: '/',
  };
};

没错，就是这么简单配置就可以了，剩下的框架帮我们处理了

值得说一下的就是，modifyContextOpts 就这么一个配置，花费了一下午才看出来，对umi框架真的是熟悉程度太低，而且官方的文档也不齐全，源码中找到的。。。。。

累了，不想多说。。

主应用

阅读《qiankun-前端接入微服务vue3项目应用》这篇文章，配置一样

更改一下url属性值就可以啦！

写在最后

如果该文有帮助到大家，给博主点个赞鼓励一下吧！