【微前端开发环境下,加载远程子应用的实战。】

news2024/10/3 2:22:19

一开始我们的本地开发运行的环境,如果没有启动子应用的话。对应的页面是白屏的。
问题:

  1. 当有关联资源需要跳转时无法跳转,需要额外打开一个浏览器tab页到环境上面执行操作。
  2. 当bug类型为纯ui-server端的内容时,需要手动启动bug相关连的全部子应用。
    为了解决上述问题,ui项目需要支持加载远程子应用。
    开发者只需要本地开启主应用以及需要进行开发的子应用即可,而不需要改动的其他子应用应该从线上环境进行加载。
    实现方案:
    我们知道qiankun的微前端实现是基于single-spa管理了子应用加载卸载等生命周期,

所有微前端应用是通过监听url变化动态加载资源的做法将 代码引入到 当前页面。

开发模式下,我们的本地环境会通过本机ip+端口号提供微前端应用的页面资源,
而线上环境其实也是会提供各个微前端应用的页面资源。
只需要在加载子应用的入口处做一层 逻辑处理 理论上可以实现加载远程子应用。
首先需要将获取子应用资源的请求代理到远程环境:

在这里插入图片描述

我们就有特定的url可以通过proxy去发送请求到远程环境

最终http://locationHost/proxy-sub-app/子应用入口/index.html 会被代理到 remoteUrl/子应用入口/index.html.
到目前,我们已经实现了 加载远程 子应用。
现在的问题是,如何判断 哪些子应用需要从远程加载,哪些子应用从本地加载。

注意:远程子应用依赖的js也需要做代理

也就是localAppList是怎么来的?
可以留下你的思考。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/7302.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据库原理及应用】——事务并发控制和恢复技术(学习笔记)

📖 前言:事务是数据库操作的基本逻辑单元,事务处理技术主要包括数据库并发控制技术和恢复技术。本章首先介绍了事务的基本概念和四个特性,然后讨论事务并发操作可能引起数据库的不一致性,继而引入数据库的并发控制技术…

Compare线刷包与卡刷包

Android系统分为卡刷包和线刷包 小米11线刷包 从该版本的boot.img中抽取出的内容如下图 小米11卡刷包 从该版本的boot.img中可以提取的内容是 也就是说,想要做配置文件抽取需要用线刷包。经过测试,目前高版本的卡刷包通过解压都无法获取到boot.img…

图像分割 - 阈值处理 - 固定阈值法

目录 1. 介绍 2. 固定阈值处理 1. 介绍 图像分割就是将图像分成不同的区域,每个区域满足相似的条件。通常,都是将图像分为两个区域:前景区域和背景区域。 前景就是人们感兴趣的位置,例如一副Lena图像,我们只对这副图…

Redis-Mysql八股总结

Redis 说一下 Redis以及Redis 使用场景 答:Redis 是一种基于内存的数据库,对数据的读写操作都是在内存中完成,因此读写速度非常快,常用于缓存,消息队列、分布式锁等场景。 Redis 设置过期时间的命令 # 设置 key 在…

上网行为监控都能审计到哪些内容?

现在很多企业都部署了上网行为监控系统,那么,它可以审计到哪些内容呢?目前市面上有不同种类的上网行为监控系统,其功能都是大同小异的,这里我们以墨门云为例,了解一下装了这个软件之后管理者可以审计到哪些…

WPF探究【一】

文章目录WPF的概述:控件分类XAML对象元素语法XAML根元素WPF和XAML命名空间声明控件Lablel示例继承关系TextBlockbuttonBorderWPF的概述: WindowsPresentationFoundation(简称WPF)WPF的核心是一个与分辩率无关且基于实量的呈现引擎…

【深入理解Kotlin协程】使用Job控制协程的生命周期

Job 是协程上下文CoroutineContext的实现之一,通过它我们可以对协程的生命周期进行一些控制操作。Job 是协程的句柄。使用 launch 或 async 创建的每个协程都会返回一个 Job 实例对象,该实例是相应协程的唯一标识并管理其生命周期。还可以将 Job 传递给 …

数据结构与算法(四) 广度优先搜索

本篇文章继续来学习广度优先搜索算法(Broad-First-Search,BFS) 1、本质 广度优先搜索本质上还是遍历整个搜索空间,找到给定问题的解 实际上也是一种暴力搜索算法,不过其中的实现细节和优化细节还是值得探讨的 与深度…

基于PHP+MySQL的大学生交友社交网站

近年来,大学生的数量在逐步的增加,为了能够让这些大学生有一个更好的交友环境,需要创建一个基于大学生的社交交友网站。这样可以拉近彼此大学生之间的感情,让他们可以更好的进行学习和交流。 PHP大学生交友社交网站通过PHP:MySQL进行开发,分为前台和后台两部分,通过…

线程的状态

Java中线程的状态是通过枚举类型Thread.State表示的 ,通过打印这些枚举类型,就可以知道java中线程的状态有哪些 public class ThreadState {public static void main(String[] args) {for (Thread.State state : Thread.State.values()) {System.out.pr…

进销存管理系统是什么?有哪些功能?

对于2022年刚开始,但是可以的确的是禽流感在短时期内是不可能返回他们,作为虚拟店面批发商想勇往直前中,就必须要亲吻网络,把销售业务从实体店搬至线上去。 想突破现状,化解虚拟店面批发民营企业的存活问题&#xff0…

ES初使用记录——写入与查询数据

本周接到一个任务:定时统计订单表中的数据,将异常订单挑出来,放入ES中供统计页面从总数点击跳转过去进行列表展示。 一、配置ES 配置maven,注入template Resource private ElasticsearchTemplate elasticsearchTemplate; 二、…

一、OBS概述

1. 概述 obs官网git源码编译 2. 软件能力 输入:文本、图片、窗口、音视频及摄像头等 处理:视频及图片滤镜、音频混音等 输出:rtmp推流、本地录制(mp4)、音视频裸数据(pcm/yuv/rgb)等 3. 模块 a. core核心模块 libobs 加载、管理各个功能…

Ansys Zemax | 大功率激光系统的STOP分析2:如何进行光机械设计准备

大功率激光器广泛用于各种领域当中,例如激光切割、焊接、钻孔等应用中。由于镜头材料的体吸收或表面膜层带来的吸收效应,将导致在光学系统中由于激光能量吸收所产生的影响也显而易见,大功率激光器系统带来的激光能量加热会降低此类光学系统的…

性能测试面试题总结(答案全)

目录 1.什么是负载测试?什么是性能测试? 2.性能测试包含了哪些测试(至少举出3种) 3.简述性能测试的步骤 4.什么时候可以开始执行性能测试? 5.你如何在负载测试模式下执行功能测试? 6.响应时间和吞吐量…

时序数据库 InfluxDB

一、介绍 InfluxDB 是一个时间序列数据库,GO 编写的,旨在处理高写入和查询负载。InfluxDB 旨在用作涉及大量时间戳数据的任何用例的后备存储,包括 DevOps 监控、应用程序指标、物联网传感器数据和实时分析。 特点: 专门为时间序列数据编写的…

格式工厂安装与使用教程

格式工厂支持各种类型视频、音频、图片、word转pdf等多种格式的免费转换,是一款非常优秀的良心软件。 在电脑浏览器中打开下载地址http://www.pcgeshi.com/index.html , 单击"立即下载"按钮即可。 打开下载的文件,等待安装即可。&#xff08…

标记肽Bz-Pro-Phe-Arg-pNA、59188-28-2

血浆激肽释放酶,cruppain和胰蛋白酶的显色底物。编号: 140214 中文名称: 标记肽Bz-PFR-对硝基苯胺 英文名: Bz-Pro-Phe-Arg-pNA CAS号: 59188-28-2 单字母: Bz-PFR-pNA 三字母: Benzoyl-Pro-Phe-Arg-pNA 氨基酸个数: 3 分子式: C33H38O6N8 平均分子量: 642.7 精确分…

python 多线程编程(线程同步和守护线程)

守护线程: 随着主线程的终止而终止,不管当前主线程下有多少子线程没有执行完毕,都会终止。 线程同步: join所完成的工作就是线程同步,即主线程任务结束之后,进入阻塞状态,一直等待其他的子线程执…

深入了解tomcat线程池

1.概述 在正式进入Tomcat线程池之前,小伙伴们可以先回顾一下JDK中的线程池相关特性,对于JDK线程池的总结和源码的解析感兴趣的童鞋,也可参考博主的层层剖析线程池源码的这篇文章,文章主要讲述对线程池的生命周期,核心参…