微前端落地系列-复盘(下)

简介: 前沿:哈喽大家好,我是树酱🌲,好久不见。本文主要为了做复盘,在去年基于qiankun微前端架构的门户建设中,遇到的一些问题,可能你会认为:“哇,这也算问题吗?太简单了吧”。主要是分享在我认知体系内是如何解决的,如果对其中一些解决方案有更好的建议,记得在评论区留言~

3.如何让新的子应用实现快速集成


前言:我们知道qiankun架构中一个子应用要集成到主应用中,是需要创建生命周期函数,比如mounted等以及修改打包方式。那如何快速让新的子应用实现快速集成呢?


我们是通过打造一个简易版的脚手架工具,把涉及相关的功能用一套模版维护起来,然后通过维护好的这个模版,然后通过脚手架创建新项目,本质上就是拉取这个模版,如下图所示


微信截图_20220514184422.png


具体开发可以参考之前写的《前端那些事》从0到1开发简单脚手架


4.如何动态注册应用?


前沿:为了让主应用可以去访问不同的子应用,我们需要在配置文件中定义好每个子应用的入口entry以及访问名称,以此来注册子应用,我们一般会不同的环境有不同的配置,比如下图所示


微信截图_20220514184438.png


👨‍🎓 啊斌同学:那这样的话,每次修改子应用的entry或者新增新的子应用都得重新编译门户这个主应用


🌲:是的,本地配置化是会存在这样的问题,我们可以搭建一个配置中心来维护,然后通过接口调用的方式来获取不同环境的,像下面这样👇


微信截图_20220514184449.png


5.部署中遇到的问题


前沿:部署微前端体系门户涉及到私有云部署,公有云部署,还有基于容器化部署等等。过程中遇到一些问题


5.1 主应用加载子应用静态资源跨域咋搞?


本质上是因主应用是通过fetch去获取子应用的静态资源的,然后通过正则去解析出来子应用的静态资源信息,然后fetch下来,所以必须要求这些静态资源支持跨域,如何配置如下图所示,通过设置允许源了


微信截图_20220514184456.png


Access-Control-Allow-Origin:跨域在服务端是不允许的。只能通过给Nginx配置Access-Control-Allow-Origin *后,才能使服务器能接受所有的请求源(Origin)


5.2 主应用加载子应用的静态资源不是最新,导致加载失败?


本质上就是子应用更新了代码,而主应用在fetch子应用资源的时候,加载到缓存的资源,导致加载资源失败,那么怎么解决呢?我们可以在子应用的nginx中,设置cache-control,在每次请求资源的时候都检查是否更新。


微信截图_20220514184507.png


5.3 如何让每个子应用都拥有通用的ngixn配置?


为了解决以上问题,又要保证通用性,可以针对每个子应用都是同样的nginx配置,这时候可以通过在dockerfile中定义,在打包到容器时,把nginx.conf也打到容器中


微信截图_20220514184514.png


5.4 如何正确部署主应用和子应用?


主要是两种方案:


  • 1.主应用和子应用部署到同一个服务器


这种情况适合公司服务器数量较少,核心就是把主应用部署在一级目录,其他子应用放在二级目录


  • 2.主应用和子应用分别部署在不同服务器


这种情况又分为两种,一种是所有子应用都在一台服务器,一种是不同子应用在不同服务器,独立运行。


最后,以上两种方式都有好有坏,具体看你搭建的系统是内部以ip访问为主还是外部访问域名为主,去根据实际情况应用。如果是内部系统建设,子应用以内部访问ip为主,子应用都在独立服务器,无需在配置过多域名,那可以直接用方案2,那如果是对外且域名有限,那方案1或许更合适。


具体的配置方式,我看qiankun官网文档已经更新,可查阅🔗文档 这里就不重复介绍



目录
打赏
0
0
0
0
4
分享
相关文章
如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)
最近笔者终于把H5-Dooring的后台管理系统初步搭建完成, 有了初步的数据采集和数据分析能力, 接下来我们就复盘一下其中涉及的几个知识点,并一一阐述其在Dooring H5可视化编辑器中的解决方案. 笔者将分成3篇文章来复盘, 主要解决场景如下
837 0
前端项目重构的一些思考和复盘
前端项目重构的一些思考和复盘
188 1
微前端落地系列-复盘(上)
前沿:哈喽大家好,我是树酱🌲,好久不见。本文主要为了做复盘,在去年基于qiankun微前端架构的门户建设中,遇到的一些问题,可能你会认为:“哇,这也算问题吗?太简单了吧”。主要是分享在我认知体系内是如何解决的,如果对其中一些解决方案有更好的建议,记得在评论区留言~
171 0
微前端落地系列-复盘(上)
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
350 14
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
116 6
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
127 1
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
248 1
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
138 0
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    5
  • 2
    从前端视角聊聊通义灵码使用经验,如何更好地提升研发效率
    148
  • 3
    巧用通义灵码,提升前端研发效率
    15
  • 4
    详解智能编码在前端研发的创新应用
    6
  • 5
    VSCode AI提效工具,通义灵码前端开发体验
    19
  • 6
    智能编码在前端研发的创新应用
    8
  • 7
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    7
  • 8
    课程预告|前端开发者如何用好通义灵码,这份实战指南请查收
    84
  • 9
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    5
  • 10
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    2
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等