qiankun-接入umi框架的微应用

目的

将自己的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属性值就可以啦!

写在最后

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

相关推荐
lypzcgf10 小时前
Coze源码分析-资源库-删除插件-前端源码-核心组件实现
前端·typescript·前端框架·react·coze·coze插件·智能体平台
EndingCoder14 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
OEC小胖胖14 小时前
页面间的导航:`<Link>` 组件和 `useRouter`
前端·前端框架·web·next.js
kk不中嘞16 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
小菜全20 小时前
使用UniApp实现下拉框和表格组件页面
开发语言·前端·javascript·elementui·前端框架·html
EndingCoder21 小时前
单元测试:Jest 与 Electron 的结合
javascript·electron·单元测试·前端框架
醉方休1 天前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
学习3人组1 天前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
Rhys..2 天前
python + Flask模块学习 1 基础用法
python·学习·前端框架·flask