当前位置：首页 > news >正文

无星的微前端之旅（四）——qiankun线上服务代理到本地

news 来源：原创 2025/5/17 2:14:45

这个方式其实是我在上家公司的时候体验过，觉得确实很有意思。

所以这里来逆推一下实现方式。

解决了什么痛点

1.开发一个模块，需要启动2-3个项目

在微前端的开发过程中，如果我们要在主应用中看效果，我们至少需要启动一个主应用，和一个待开发模块，如果项目具有登陆机制，我们还需要启动一个登陆模块。

换句话说，为了开发一个模块，我们需要至少启动三个项目。

2.数据耦合的情况下，无法单独启动项目调试

3.特定环境下出现的bug

可能某些bug依赖特定的数据，在测试环境出现了但在本地运行或开发环境运行正常。

如何解决

在成功发布一个版本以后，配置需要在特定条件下触发加载的本地模块，从而将线上服务的某些模块，代理到本地启动的模块，进行开发调试。

如何实现

前面几篇讲到，注册的配置信息其实是可以从远端拉取的，那么只需要有一个配置的地方，我们就可以动态修改这个配置列表。

换句话说，我们可以通过一些代码，配合需要配置列表，进行代理。

1.预设特定条件

比如我们预设一个特定条件：

环境为development或beta环境

且

成功读取远程配置列表

且

浏览器localStorage中存在名为developer的值

2.使用可热更新读取的配置表，例如nacos提供

举个例子：
构造一个对象，key表示开发者名字，value为需要代理到本地的数组，item的name为代理模块名称，entry表示入口地址，填写本地的运行地址就行。

// 远程需要读取的配置项
{xingwu:[{name:'sub-login',entry:'//localhost:3002'}]
}

3.修改主应用代码

3.2 main.js

改造前

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
// 注册
import register from './micro/index';
// 添加全局通信
import '@/micro/store';createApp(App).use(store).use(router).mount('#app');
// 注册
register();

改造后

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import api from './api';
// 注册
import register from './micro/index';
// 添加全局通信
import '@/micro/store';createApp(App).use(store).use(router).mount('#app');
// 注册
// 获取远端开发者
const isDevelopment = () => process.env.VUE_APP_ENV_CONFIG === 'development' || process.env.VUE_APP_ENV_CONFIG === 'beta';
if (isDevelopment) {// 网络请求获取远端配置api.getDeveloper().then((response) => {window.subApps = response;}).finally(() => {register();});
} else {register();
}

改造需要的注意点就是注册时机

1.判断环境是否是development环境或beta环境。

这个可以根据配置.env文件中的环境变量属性，在不同环境执行不同mode打包做到。

2.如果加载成功，把加载好的结果存起来。

3.如果加载失败，也得继续注册，不然页面直接挂了。

3.2 subapps

改造前：

import router from '@/router/index';
// 此时在开发，测试环境，理论上已经挂载了subapps的入口
const baseUrl = process.env.BASE_URL;const subapps = [{name: 'sub-login',entry: process.env.VUE_APP_SUB_LOGIN,container: '#sub-apps',activeRule: `${baseUrl}sub-login`,props: {routeBasePath: '/sub-login',mainRouter: router,},},{name: 'sub-user-manage',entry: process.env.VUE_APP_SUB_USER_MANAGE,container: '#sub-apps',activeRule: `${baseUrl}sub-user-manage`,props: {routeBasePath: '/sub-user-manage',mainRouter: router,},},
];export default subapps;

改造后：

import router from '@/router/index';
// 此时在开发，测试环境，理论上已经挂载了subapps的入口
const baseUrl = process.env.BASE_URL;const subapps = [{name: 'sub-login',entry: process.env.VUE_APP_SUB_LOGIN,container: '#sub-apps',activeRule: `${baseUrl}sub-login`,props: {routeBasePath: '/sub-login',mainRouter: router,},},{name: 'sub-user-manage',entry: process.env.VUE_APP_SUB_USER_MANAGE,container: '#sub-apps',activeRule: `${baseUrl}sub-user-manage`,props: {routeBasePath: '/sub-user-manage',mainRouter: router,},},
];// 判断本地是否存在developer
const developer = localStorage.getItem('developer');
if (window.subApps && developer) {// 获取远端定义的入口const tmpArray = window.subApps[developer];if (tmpArray) {tmpArray.forEach((item) => {subapps.forEach((app) => {if (app.name === item.name) {app.entry = item.entry;}});});}
}
export default subapps;

比如上面，我在远端定义了一个开发者xingwu

我只需要再在浏览器的localStorage手动添加一个developer:xingwu

就可以触发匹配，将我指定的模块，加载本地启动的模块，代理到本地。

而其他所有用户所有模块，均不受影响。

就这样，完美解决了上面提出的痛点。

最后给大家看一下效果。

喜欢的朋友记得点赞、收藏、关注哦！！！

无星的微前端之旅（四）——qiankun线上服务代理到本地

这个方式其实是我在上家公司的时候体验过，觉得确实很有意思。所以这里来逆推一下实现方式。解决了什么痛点 1.开发一个模块，需要启动2-3个项目在微前端的开发过程中，如果我们要在主应用中看效果，我们至少需要启动一个主应用&am…...

编程日记 2025/5/17 2:14:45

鸿蒙进阶篇-Stage模型、UIAbility

“在科技的浪潮中，鸿蒙操作系统宛如一颗璀璨的新星，引领着创新的方向。作为鸿蒙开天组，今天我们将一同踏上鸿蒙基础的探索之旅，为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…...

编程日记 2025/5/17 10:04:45

快速上手：如何开发一个实用的 Edge 插件

在日常浏览网页时，背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片，并希望背景图片设置能够持久保存，本文将介绍如何通过开发一个自定义Edge插件来实现这一功能。我们将涵盖保存背景设置到插件选项页&a…...

编程日记 2025/5/10 17:24:08

java缓存技术点介绍

1. 缓存（Cache）： • 缓存是指用于存储数据的临时存储区域，以便快速访问。在Java中，缓存通常用于存储频繁访问的对象、结果集或其他数据。 2. 缓存命中率（Cache Hit Ratio）： • 缓存命…...

编程日记 2025/5/14 15:43:12

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】

【单片机毕业设计12-基于stm32c8t6的智能称重系统设计】前言一、功能介绍二、硬件部分三、软件部分总结前言 🔥这里是小殷学长，单片机毕业设计篇12-基于stm32c8t6的智能称重系统设计 🧿创作不易，拒绝白嫖可私一、功能介绍 ----…...

编程日记 2025/5/14 15:22:33

音视频流媒体直播/点播系统EasyDSS互联网视频云平台介绍

随着互联网技术的飞速发展，音视频流媒体直播已成为现代社会信息传递与娱乐消费的重要组成部分。在这样的背景下，EasyDSS互联网视频云平台应运而生，它以高效、稳定、便捷的特性，为音视频流媒体直播领域带来了全新的解决方案。 1、产…...

编程日记 2025/5/12 11:23:43

3dtile平移子模型以及修改 3D Tiles 模型的模型矩阵z平移

第一段代码：应用平移变换到子模型这段代码的目的是获取子模型的变换矩阵，并将其平移 10 个单位。 if (submodel) {// 获取当前子模型的变换矩阵let transform submodel.transform// 创建一个向上的平移矩阵，平移 10 个单位let translation…...

编程日记 2025/5/15 14:53:10

JavaScript中类数组对象及其与数组的关系

JavaScript中类数组对象及其与数组的关系 1. 什么是类数组对象？ 类数组对象是指那些具有 length 属性且可以通过非负整数索引访问元素的对象。虽然这些对象看起来像数组，但它们并不具备真正数组的所有特性，例如没有继承 Array.prototype 上…...

编程日记 2025/5/13 12:12:36

【机器学习】机器学习学习笔记 - 监督学习 - 逻辑回归分类朴素贝叶斯分类支持向量机 SVM (可分类、可回归) - 04

逻辑回归分类 import numpy as np from sklearn import linear_modelX np.array([[4, 7], [3.5, 8], [3.1, 6.2], [0.5, 1], [1, 2], [1.2, 1.9], [6, 2], [5.7, 1.5], [5.4, 2.2]]) y np.array([0, 0, 0, 1, 1, 1, 2, 2, 2])# 逻辑回归分类器 # solver：求解器&a…...

编程日记 2025/5/15 5:01:05

Python脚本文件开头两行#!/usr/bin/python和# -- coding: utf-8 --的作用

Linux环境下，Python脚本代码文件，比如test.py，文件的第一行一般要指定解释器，使用Linux的Shebang的形式指定，第二行一般指定编码格式。首行指定解释器工具，使用方式如下： # 第1种方式&#x…...

编程日记 2025/5/17 9:16:52

使用PyQt5开发一个GUI程序的实例演示

一、安装Python 下载安装到这个目录 G:\Python38-32 安装完成有这些工具，后面备用： G:\Python38-32\Scripts\pyrcc5.exe G:\Python38-32\Scripts\pyuic5.exe 二、PyQt环境配置 pip install PyQt5 pip install pyqt5-tools 建议使用国内源&#xff0c…...

编程日记 2025/5/17 10:00:12

3d扫描建模产品开发-三维扫描检测蓝光检测

现当下，汽车制造、航空航天，还是消费电子、医疗器械，三维扫描检测与蓝光技术正以前所未有的精度和效率，推动着产品从概念到实物的快速转化。三维扫描技术，简而言之，就是通过激光、结构光（如蓝…...

编程日记 2025/5/16 13:11:59

多线程——01

1. 进程/任务 process/task 进程是操作系统对一个正在运行的程序的一种抽象，换言之，可以把进程看做程序的一次运行过程每个进程想要执行，都需要消耗一定的系统资源（硬件资源） 1）进程在系统中的作用 a…...

编程日记 2025/5/16 21:36:02

Makefile中-D选项定义预编译处理宏

1.简单示例假设我们有一个简单的 C 程序main.c，内容如下： #include <stdio.h> #ifdef DEBUGvoid print_debug_info() {printf("This is debug information.\n");} #elsevoid print_debug_info() {} #endif int main() {print_debug_info();printf("Prog…...

编程日记 2025/5/13 21:28:21

NAPI杂记

NAPI和tasklet区别：NAPI是利用的软中断NET_RX_SOFTIRQ实现， tasklet是利用TASKLET_SOFTIRQ实现另外文章说NAPI主要是采用轮询，可以减少中断触发次数。do_softirq里面是开中断执行的啊？ 中断处理函数关闭中断开始处理。如果此时…...

编程日记 2025/5/14 14:10:50

006 MATLAB编程基础

01 M文件 MATLAB输入命令有两种方法： 一是在MATLAB主窗口逐行输入命令，每个命令之间用分号或逗号分隔，每行可包含多个命令。二是将命令组织成一个命令语句文集，使用扩展名“.m”，称为M文件。它由一系列的命令和语句…...

编程日记 2025/5/13 14:11:10

使用Alpine镜像作为基础镜像的Dockerfile配置

配置阿里 apk源： /etc/apk/repositories： https://mirrors.aliyun.com/alpine/v3.13/main alpine-v3.13-community安装包下载_开源镜像站-阿里云或者使用命令 sed -i sdl-cdn.alpinelinux.orgmirrors.aliyun.comg /etc/apk/repositories dockerfil…...

编程日记 2025/5/15 12:49:18

RAG (Retrieval Augmented Generation) 检索增强和生成

1 RAG技术简介 1.1 RAG技术概述 RAG（Retrieval Augmented Generation） 是一种结合了检索（Retrieval）和生成（Generation）的技术，旨在通过利用外部知识库来增强大型语言模型（LLMs&am…...

编程日记 2025/5/12 4:34:18

Figma入门-约束与对齐

Figma入门-约束与对齐前言在之前的工作中，大家的原型图都是使用 Axure 制作的，印象中 Figma 一直是个专业设计软件。最近，很多产品朋友告诉我，很多原型图都开始用Figma制作了，并且很多组件都是内置的&#xff0c…...

编程日记 2025/5/17 4:17:24

039集——渐变色之：CAD中画彩虹（）（CAD—C#二次开发入门）

（来左边儿跟我一起画个龙，在你右边儿画一道彩虹 ~~~~~~~~~~~ ） 效果如下： namespace AcTools {public class Class1{public Wform.Timer timer;//定时器需建在类下面public static DateTime startTime;[CommandM…...

编程日记 2025/5/15 23:25:02

MTK主板_小型联发科安卓主板_行业智能终端主板基于联发科方案

MTK安卓主板是一款小巧而高效的科技产品，其尺寸仅为43.4mm x 57.6mm。采用了先进的联发科12nm制程工艺，这款主板搭载四核或八核64位A53架构的CPU，主频高达2.0GHz，不但保证了出色的计算能力，还实现了超低功耗的特点。系…...

编程日记 2025/5/12 7:33:54

Arrays.copyOfRange(),System.arraycopy() 数组复制,数组扩容

Arrays.copyOfRange() 当需要将数组中的长度扩容时, 数组复制使用需要用到Arrays 类提供的的参数解析 * param original the array from which a range is to be copied * param from the initial index of the range to be copied, inclusive * param to the final ind…...

编程日记 2025/5/13 1:46:57

Docker for Everyone Plus——No Enough Privilege

直接告诉我们flag在/flag中，访问第一小题： sudo -l查看允许提权执行的命令： 发现有image load命令题目指明了有rz命令，可以用ZMODEM接收文件，看到一些write up说可以用XShell、MobaXterm、Tabby Terminal等软件连接上…...

编程日记 2025/5/15 17:19:40

ElasticSearch学习笔记把：Springboot整合ES（二）

一、前言上一篇文章中我们学习了ES中的Term级别的查询，包括 term、terms、terms_set、rang等，今天我们使用Java代码实现一遍上述的查询。二、项目依赖 POM <?xml version"1.0" encoding"UTF-8"?> <project xmlns&q…...

编程日记 2025/5/5 15:19:14

Linux系统之iotop命令的基本使用

Linux系统之iotop命令的基本使用一、iotop命令介绍二、iotop命令的使用帮助2.1 安装iotop2.2 iotop命令help帮助信息2.3 iotop命令选项解释三、 iotop命令的基本使用四、iotop使用注意事项一、iotop命令介绍 iotop 是一个类似于 top 的命令行工具，但它专注于显示…...

编程日记 2025/5/14 11:34:46

根据合约地址判断合约协议的方法

判断合约协议之前，需要了解一下什么是ERC165协议： ERC165 是以太坊中用于标准化接口检测的协议，由 Fabian Vogelsteller 在 2018 年创建 ，其核心内容主要包括以下方面： 接口定义单一函数接口：ERC165 协议…...

编程日记 2025/5/17 4:04:58

什么是sfp，onu，为什么PON（俗称“光猫”）模块使用SC光纤接口

在现代网络设备中，我们经常会看到SFP或SFP接口的身影，这些接口有时被简称为光口，但这个称呼并不严谨。有些厂商则称之为多功能口或多用途口，然而这对于不了解的人来说可能还是一头雾水。SFP，即Small Form-Factor Plugg…...

编程日记 2025/5/11 21:56:06

链表？-＞？（以尾插法说明，附头插法）

这篇文章做一些关于初学链表的一些问题的解答。我知道有些朋友只是需要一份完整的关于链表的代码，我会附在后面，大家直接划到最后就好。一、创建链表 (1 相信所有搜索过链表创建的朋友都看过这样一行： struct Line* head (struct Line…...

编程日记 2025/5/17 7:59:32

11.29周五F34-Day10打卡

文章目录 1. 问问他能不能来。解析答案：【解析答案分析】【对比分析】【拓展内容】2. 问题是他能不能做。解析答案：【解析答案分析】3. 问题是我们能否联系得上她。(什么关系?动作 or 描述?)解析答案：【解析答案分析】【对比分析】4. 我们在讨论是否要开一个会。解析答案：…...

编程日记 2025/5/14 23:32:13

【项目日记】仿mudou的高并发服务器 --- 实现HTTP服务器

对于生命，你不妨大胆一点， 因为我们始终要失去它。 --- 尼采 --- ✨✨✨项目地址在这里 ✨✨✨ ✨✨✨https://gitee.com/penggli_2_0/TcpServer✨✨✨ 仿mudou的高并发服务器 1 前言2 Util工具类3 HTTP协议3.1 HTTP请求3.2 HTTP应答 4 上下文解析模块…...

编程日记 2025/5/12 3:18:28

【SpringBoot问题】IDEA中用Service窗口展示所有服务及端口的办法

1、调出Service窗口打开View→Tool Windows→Service，即可显示。 2、正常情况应该已经出现SpringBoot，如下图请继续第三步 3、配置Service窗口的项目启动类型。微服务一般是Springboot类型。所以这里需要选择一下。点击最后一个号，点击Ru…...

编程日记 2025/5/13 14:14:28

Ubuntu20.04运行LARVIO

文章目录 1.运行 Toyish 示例程序2.运行 ROS Nodelet参考 1.运行 Toyish 示例程序 LARVIO 提供了一个简化的toyish示例程序，适合快速验证和测试。编译项目进入 build 文件夹并通过 CMake 编译项目： mkdir build cd build cmake -D CMAKE_BUILD_TYPER…...

编程日记 2025/5/12 9:11:23

数字化转型背景下，高职院校计算机网络应用的革新策略

在当今信息化时代，计算机网络已经成为高职院校教育不可或缺的一部分，它不仅极大地丰富了教育资源，提高了交流的便捷性，还催生了多样化的教学模式。对于高职院校来说，加强计算机网络应用的建设不仅是顺应时代潮流的必然…...

编程日记 2025/5/13 12:30:05

mysql 里面的主表和子表是什么?如何创建主表和子表的关系

在MySQL数据库中，主表和子表的概念是基于表间关系的。它们通常通过外键约束来建立联系，这种关系有助于维护数据的完整性和一致性。以下是对MySQL中主表和子表的详细解释： 主表（父表） 定义：主表&#xff0c…...

编程日记 2025/5/14 2:57:41

工程企业的成本管理系统软件应该有哪些特点？

工程企业的成本管理系统软件需要兼顾工程项目的复杂性和动态性，其功能特点应服务于成本核算、监控、优化与分析全生命周期管理，以下是关键特点： 一、核心功能特点 1. 全生命周期成本管理覆盖范围： 从项目立项、投标、预算编制&…...

编程日记 2025/5/12 1:58:09

【前端开发】实战：课表安排（HTML + JavaScript + Vue3 + Vant）

后端开发主要定义了三个核心部分：每周周期（WeekDays）、每天节次（TimeLessons） 和每天节次详情（Details） 每周周期（WeekDays） 存储了每周的七天（通常是从周一…...

编程日记 2025/5/7 17:07:45

nodejs建立TCP服务器端和TCP客户端之间的连接

TCP服务器端，看名字也知道是建立在服务器上面的 //获取模块 const net require(net); //创建server服务器 const servernet.createServer(); //与客户端建立连接 server.on(connection,function(socket){console.log(客户端与服务器连接已经建立);//socket是客户端…...

编程日记 2025/5/14 9:54:22

Pytorch使用手册-What is torch.nn really?（专题九）

我们建议将本教程作为 notebook 而不是脚本运行。要下载 notebook（.ipynb）文件，请点击页面顶部的链接。 PyTorch 提供了精心设计的模块和类，如 torch.nn、torch.optim、Dataset 和 DataLoader，帮助你创建和训练神经网络。为了充分利用这些工具的强大功能并根据你的问题进…...

编程日记 2025/5/12 15:40:16

ADAM优化算法与学习率调度器：深度学习中的关键工具

深度学习模型的训练效果离不开优化算法和学习率的选择。ADAM（Adaptive Moment Estimation）作为深度学习领域中广泛应用的优化算法之一，以其高效性和鲁棒性成为许多任务的默认选择。而学习率调度器则是优化算法的“助推器”，帮助训…...

编程日记 2025/5/9 15:33:50

黑马2024AI+JavaWeb开发入门Day03-Maven-单元测试飞书作业

视频地址：哔哩哔哩讲义作业飞书地址：飞书作业比较简单，随便写了写 package org.example;import org.junit.jupiter.api.Assertions; import org.junit.jupiter.api.BeforeEach; import org.junit.jupiter.api.Test; import org.junit.ju…...

编程日记 2025/5/15 17:47:47

TouchGFX设计模式代码实例说明

一)Model - View - Presenter (MVP) 模式在 TouchGFX 中的应用 1)Model（模型）： 模型代表应用程序的数据和业务逻辑。例如，在一个简单的计数器应用中，模型可以是一个包含计数器当前值的类。 class CounterModel { pri…...

编程日记 2025/5/15 12:22:37

Docker扩容操作(docker总是空间不足)

Docker扩容操作(docker总是空间不足) 1、df二连，一共也就70g，总是占满93%以上。所以需要移动到其他目录上查看docker镜像和容器存储目录的空间大小 du -sh /var/lib/docker/2、停止docker服务 systemctl stop docker3、首先创建目录并迁移 # 首先创…...

编程日记 2025/5/15 13:48:43

ELK Fleet JAVA LOG收集与展示教程

目录 elastic-fleet架构 Elastic Agent的优势 Fleet JAVA日志收集流程 1.注册Fleet Sever 2.创建JAVA代理收集策略Agent Policy 3.添加集成 integration 4.调整Java log输出格式 5.添加Elastic Agent 6.添加Ingest 7.创建数据视图 8.其他Policy nginx-policy syst…...

编程日记 2025/5/17 2:46:23

【Python网络爬虫笔记】2-HTTP协议中网络爬虫需要的请求头和响应头内容

1 HTTP 协议整理 HTTP（Hyper Text Transfer Protocol）即超文本传输协议，是用于从万维网（WWW）服务器传输超文本到本地浏览器的传送协议，直白点儿，就是浏览器和服务器之间的数据交互就是通过 HTT…...

编程日记 2025/5/16 22:37:37

TiDB 调度概述

PD 是 TiDB 集群的管理模块，同时也负责集群数据的实时调度。本文档介绍一下 PD 的设计思想和关键概念。场景描述 TiKV 集群是 TiDB 数据库的分布式 KV 存储引擎，数据以 Region 为单位进行复制和管理，每个 Region 会有多个 Replica&#xf…...

编程日记 2025/5/10 23:06:21

MySQL的Json类型数据操作方法

前言 MySQL在5.7增加了json类型数据，项目中最近有在使用。直接使用JSONObject或者JSONArray类型的时候会报以下的异常。发现需要将Java实体字段设置为String类型，然后需要的时候自己转换为JSONObject或者JSONArray。使用很不方便，经研究发现…...

编程日记 2025/5/16 20:33:52

论文笔记（五十九）A survey of robot manipulation in contact

A survey of robot manipulation in contact 文章概括摘要1. 引言解释柔顺性控制的概念：应用实例： 2. 需要接触操控的任务2.1 环境塑造2.2 工件对齐2.3 关节运动2.4 双臂接触操控 3. 接触操控中的控制3.1 力控制3.2 阻抗控制3.3 顺应控制 4. 接触操控中的…...

编程日记 2025/5/16 8:01:40