qiankun-接入umi框架的微应用

news2024/10/11 1:21:24

目的

将自己的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

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

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

src/app.ts

...

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

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

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

累了,不想多说。。

主应用

阅读《qiankun-前端接入微服务vue3项目应用》这篇文章,配置一样
更改一下url属性值就可以啦!

写在最后

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

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

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

相关文章

重塑排班新体验,搭贝员工排班系统 —— 让管理更高效,工作更顺心!

在快节奏的工作环境中,排班管理往往是决定团队效率与员工满意度的关键。搭贝低代码平台精心打造的员工排班系统应用,以直观、智能、灵活为核心,为您的团队带来前所未有的排班体验。 📅 日历视图,一目了然 我们采用…

论文翻译 | Fairness-guided Few-shot Prompting for LargeLanguage Models

摘要 大型语言模型已经显示出令人惊讶的执行上下文学习的能力,也就是说,这些模型可以通过对由几个输入输出示例构建的提示进行条件反射,直接应用于解决大量下游任务。然而,先前的研究表明,由于训练示例、示例顺序和提示…

刷题小计六:矩阵

73.矩阵置零 mid 矩阵置零 ①先使用两个变量&#xff08;row_0 & col_0&#xff09;&#xff0c;记录「首行 & 首列」是否该被置零 ②在「非首行首列」的位置&#xff0c;存储置零信息到首行首列 // 把第一行第一列作为标志位for (int i 1; i < row; i) {for (…

电动牙刷拆解学习

大厂量产的产品的寻片选型为自己设计硬件的时候芯片选型提供了参考&#xff1a; 采用这个触点的方式充电相比于tppeC来说可以很好起到防水作用&#xff1a; USB公头&#xff1a; 牙刷母头&#xff1a; 电池充电芯片来自英集芯&#xff0c;型号IP2326&#xff0c;是一颗内部集…

执行node.js获取本机Ip命令,报:Error: Cannot find module ‘ip‘错误

Error: Cannot find module ip是由于没有改模块的依赖包&#xff0c;需要进行安装&#xff0c;以管理员的身份打开命令行&#xff0c;执行npm install ip 获取当前电脑的ip地址 方法一&#xff1a; const ip require("ip")/*** 1:获取当前电脑的ip地址*/ console.…

渗透测试之 域AD渗透手法【密码喷洒技术】手法详解 以及相关示例

说明: 域内密码喷洒工具: Kerbrute DomainPasswordSpray.ps1 原理抓个包分析一下&#xff1a; 域内用户枚举攻击防御&#xff1a; 流量检测&#xff1a; 说明: 域内密码喷洒&#xff08;Password Spraying&#xff09;一般和域内用户名枚举一起使用。 域内密码喷洒工具:…

slam系列1:open3d入门笔记

1. 读写数据 这里有很多测试用的pcd文件&#xff1a; https://github.com/PointCloudLibrary/data/blob/master/tutorials/ import open3d as o3d pcd o3d.io.read_point_cloud("test.pcd") o3d.io.write_point_cloud("write.pcd", pcd, True) # 默认fa…

SF6气体密度监测仪市场研究:主要企业的市场份额已超过37.13%

SF6气体密度监测仪是一种专用于监测和测量六氟化硫&#xff08;SF6&#xff09;气体密度的设备。SF6气体因其优异的绝缘性能和灭弧能力&#xff0c;被广泛应用于电力行业&#xff0c;尤其是在气体绝缘金属封闭开关设备&#xff08;GIS&#xff09;和断路器等关键设备中。随着电…

Java 函数式编程(1 万字)

此笔记来自于B站黑马程序员 good Java 历史版本及其优势 函数式编程, Stream API 一.函数伊始函数、函数对象 函数对象 行为参数法 延迟执行 a-lambda b-方法引用 复习小测 Math::random () -> Math.random()Math::sqrt (double number) -> Math.sqrt(number)Student:…

喜大普奔!eBay英国站取消个人卖家几乎所有销售费用!

二手电商市场竞争愈发激烈&#xff0c;eBay开始放大招了&#xff01;为什么说是取消个人卖家的几乎所有销售费用呢&#xff1f;一起来了解一下—— eBay英国站个人卖家无需支付最终交易费或监管运营费&#xff0c;这大大减轻了个人卖家的交易成本。不过需要注意的是&#xff0…

后端开发——规则引擎简介(Drools)

目录 什么是规则引擎&#xff1f;规则引擎带来的好处;Drools案例规则引擎的工作原理及应用场景常见的规则引擎及对比工作流引擎与规则引擎有什么不同 什么是规则引擎&#xff1f; 规则引擎&#xff0c;听起来高大上&#xff0c;其实可以理解为一种帮助你做“决策”的工具。你可…

使用浏览器原生API实现录屏功能

好早之前写了个小deme,本来都忘了,现在无意中又翻出来了,所以也来记录一下吧! 废话不说了,直接上代码了: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content=&q…

byte[]/InputStream/MultipartFile之间进行转换

前言 问题产生&#xff1a; 最近开发项目的时候&#xff0c;遇到了文件上传对象转换的问题 -> 我在对接抖音开放平台的时候&#xff0c;有一个图片上传的接口&#xff0c;需要将byte[]转为MultipartFile 对象&#xff0c;但是发现根本没有这样的工具类&#xff0c;后面翻阅…

无人机之巡航控制篇

一、巡航控制的基本原理 无人机巡航控制的基本原理是通过传感器检测无人机的飞行状态和环境信息&#xff0c;并将其反馈给控制器。控制器根据反馈信息和任务需求&#xff0c;计算出无人机的控制指令&#xff0c;并将其发送给执行机构。执行机构根据控制器的控制指令&#xff0c…

数据结构与算法——Java实现 33.堆排序

刻意去找的东西&#xff0c;往往是找不到的。 天下万物的来和去&#xff0c;都有它的时间。 —— 24.10.10 使用堆进行排序 算法描述 1.heapify 建立大顶堆&#xff08;所有结点的父元素大于子元素&#xff09; 2.将堆顶与堆底交换(最大元素被交换到堆底)&#xff0c;缩小并…

Python测试框架--Allure

严格意义上讲 Allure 不算是测试框架&#xff0c;但是它是生成漂亮测试报告的开源工具&#xff0c;搭配 Pytest 测试框架食用更搭。 也就是说 Allure 是在 Pytest 执行完生成的测试数据的基础上&#xff0c;对测试数据进行处理统计&#xff0c;生成格式统一、美观的测试报告。 …

java反射Class类的api

目录 Class类 1.构造器相关 1&#xff09;Constructor getConstructor(Class... parameterTypes): 2&#xff09;Constructor[] getConstructors(): 3&#xff09;Constructor getDeclaredConstructor(Class... parameterTypes): 4&#xff09;Constructor[] getDeclaredConstr…

国外火出圈儿的PM御用AI编程工具Bolt.new效果干不过国产的CodeFlying?号称全新定义全栈开发流程?

不知道大家最近有没有发现国外的很多AI都在挤破脑袋想去提升大模型的编程能力&#xff0c; 离我们最近的是上周Openai 发布的全新模型GPT-4o-Canvas&#xff0c; 拥有超强的代码编写能力。 另外还有LlamaCoder、Cursor、Claude artifacts、Replit... 光是今年一年就推出了好…

深入理解Transformer的笔记记录(精简版本)---- Transformer

自注意力机制开启大规模预训练时代 1 从机器翻译模型举例 1.1把编码器和解码器联合起来看待的话,则整个流程就是(如下图从左至右所示): 1.首先,从编码器输入的句子会先经过一个自注意力层(即self-attention),它会帮助编码器在对每个单词编码时关注输入句子中的的其他单…

xtu oj 四位数

样例输入# 2 1990 1111样例输出# 5 0 分离整数与合并 AC代码 #include<stdio.h> //判断四个数码是否相等 int Judge(int n){int flag1;int gn%10,sn/10%10,bn/100%10,qn/1000;if(gs&&gb&&gq)flag0;return flag; } int main(){int T;scanf("%d…