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

【微前端】qiankun + vite + vue3

专栏:

  • 【微前端】什么是微前端
  • 【微前端】qiankun
  • 【微前端】qiankun + vite + vue3

一、整体结构

在 qiankun 体系下,一个微前端工程包含一个主应用和多个子应用。本质上,每个工程(主应用)都可以单独开发、运行。

1.1 开发时工程结构

共三个工程,一个主应用、两个子应用,目录结构:

.
├── app-01
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
├── app-02
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
├── main-app
│   ├── README.md
│   ├── index.html
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── public
│   ├── src
│   ├── tsconfig.json
│   ├── tsconfig.node.json
│   └── vite.config.ts
└── readme.md

1.2 部署工程结构

部署方式可以选择多种,这里使用的方式是将三个工程部署在同一个 server、同一个 port 下,目录结构为:

.
├── index.html
├── static
│   ├── index-011eeef2.css
│   └── index-0ab867b1.js
├── sub
│   ├── app-01
│   │   ├── index.html
│   │   ├── static
│   │   │   ├── index-0244ff29.js
│   │   │   └── index-83c9dd61.css
│   │   └── vite.svg
│   └── app-02
│       ├── index.html
│       ├── static
│       │   └── index-cb440182.js
│       └── vite.svg
└── vite.svg

二、开发

开发时,三个应用对应的监听端口:

应用端口
main-app80
app-018081
app-028082

工程启动之后,可以在浏览器访问:

  • http://localhost:80 整体运行效果
  • http://localhost:8081 app-01 单独运行效果
  • http://localhost:8082 app-02 单独运行效果

2.1 主应用

主应用用于注册子应用,以及控制子应用之间的切换。

A. 注册子应用

在新建的 vue3 工程的 main.ts 中注册子应用:

// 开发模式时,entry的值为子应用的开发演示环境的地址
if ("development" === import.meta.env.MODE) {registerMicroApps([{name: "app_01",entry: "//localhost:8081/",container: "#container",activeRule: "/app_01",},{name: "app_02",entry: "//localhost:8082/",container: "#container",activeRule: "/app_02",},]);
} else {// 生产环境时,entry的路径为app在部署时的真实路径registerMicroApps([{name: "app_01",entry: "./sub/app-01",container: "#container",activeRule: "/app_01",},{name: "app_02",entry: "./sub/app-02",container: "#container",activeRule: "/app_02",},]);
}setDefaultMountApp("/app_01");// 启动 qiankun
start();

注册子应用时,分为两种模式,开发模式和部署模式,对应的 entry 的值是有区别的。

B. 子应用路由

<a @click="toApp('/app_01')">app 01</a>
function toApp(path: string) {history.pushState({}, "", path);
}

需要注意的是,这里不能使用 a 标签 的 href,会报错 404 错误,必须使用history.pushState控制路由。

因为href属性会导致浏览器刷新,获取不到资源。

2.2 子应用

A. 安装依赖

pnpm add vite-plugin-qiankun

vite.config.js

配置文件修改

export default defineConfig({// 打包时,这里填充的为绝对路径,对应的是部署路径base: "/sub/app-01",plugins: [vue(),qiankun("app-01", {useDevMode: true,}),],
});

C. 入口改造

启动方式,分为两种:

  • 单独启动
  • 在主应用中启动

qiankun 需要子应用导出三个接口:

  • bootstrap
  • mount
  • unmount
import {renderWithQiankun,qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";import { App as VueApp, createApp } from "vue";
import router from "./router";
import App from "./App.vue";let app: VueApp<Element>;
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {createApp(App).use(router).mount("#app");
} else {renderWithQiankun({mount(props) {console.log("--app 01 mount");app = createApp(App);app.use(router);app.mount((props.container? props.container.querySelector("#app"): document.getElementById("app")) as Element);},bootstrap() {console.log("--app 01 bootstrap");},update() {console.log("--app 01 update");},unmount() {console.log("--app 01 unmount");app?.unmount();},});
}

三、部署

三个工程依次打包后,在main-app的打包输出中,新建 sub 文件夹,将子应用的打包输出移动到 sub 文件夹中。结构:

.
├── index.html
├── static
│   ├── index-011eeef2.css
│   └── index-0ab867b1.js
├── sub
│   ├── app-01
│   │   ├── index.html
│   │   ├── static
│   │   │   ├── index-0244ff29.js
│   │   │   └── index-83c9dd61.css
│   │   └── vite.svg
│   └── app-02
│       ├── index.html
│       ├── static
│       │   └── index-cb440182.js
│       └── vite.svg
└── vite.svg

在本地启动一个静态 web 服务即可访问页面,比如使用serve命令启动服务:

serve . -p 5500

浏览器中访问:http://localhost:5500

四、坑点

001. 主应用注册 App 时,activeRule 有两种模式

hash 模式

const getActiveRule = (hash) => (location) => location.hash.startsWith(hash);
registerMicroApps([{name: "app-hash",entry: "http://localhost:8080",container: "#container",activeRule: getActiveRule("#/app-hash"),// 这里也可以直接写 activeRule: '#/app-hash',但是如果主应用是 history 模式或者主应用部署在非根目录,这样写不会生效。},
]);

history 模式

registerMicroApps([{name: "app",entry: "http://localhost:8080",container: "#container",activeRule: "/app",},
]);

002. 主应用使用history时,如何控制子应用的切换

history 模式时,主应用会监听location.pathname的变化,从而切换子应用的加载与卸载。

主应用中,使用 a 便签切换应用时:

<!-- 开发环境时,没有问题 -->
<!-- 部署环境时,会报错:/app_01 404的错误 -->
<a href="/app_01">app 01</a>

404 的原因,静态部署时:a 标签会触发浏览器的刷新,刷新后,浏览器向后台发起请求/app_01,后台的确没有这个物理路径

改进方案,使用 history.pushState 接口:

<a @click="toApp('/app_01')">app 01</a>
function toApp(path: string) {history.pushState({}, "", path);
}

使用history.pushState的方式,不会出发浏览器的刷新行为。当浏览器的pathname发生变化时,qiankun会感知到路由发生变化,并加载对应的页面。

到这一步时,若不主动执行F5刷新操作,一切正常。但使用F5后,还是会报错 404,此时需要后台的路由进行配合,以 Nginx 为例子:

server {listen       8080;server_name  localhost;location / {root   html;index  index.html index.htm;try_files $uri $uri/ /index.html;}location /child/vue-history {root   html;index  index.html index.htm;try_files $uri $uri/ /child/vue-history/index.html;}
}

六、源码

源码地址:https://github.com/swlws/qiankun-vite-vue3

相关文章:

【微前端】qiankun + vite + vue3

专栏&#xff1a; 【微前端】什么是微前端【微前端】qiankun【微前端】qiankun vite vue3 一、整体结构 在 qiankun 体系下&#xff0c;一个微前端工程包含一个主应用和多个子应用。本质上&#xff0c;每个工程&#xff08;主应用&#xff09;都可以单独开发、运行。 1.1…...

模型部署之TorchScript

一.关于torchscript和jit介绍 1.关于torchscript TorchScript是Pytorch模型&#xff08;继承自nn.Module&#xff09;的中间表示&#xff0c;保存后的torchscript模型可以在像C这种高性能的环境中运行 TorchScript是一种从PyTorch代码创建可序列化和可优化模型的方法。任何T…...

修改linux网卡配置文件的文件名

修改linux网卡配置文件的文件名 查看自己系统中网卡配置文件的文件名 #查看网卡的配置文件名&#xff0c;已经网络的状态 ip a查看系统是否可以使用ifconfig命令 #输入命令 ifconfig #出现以下图片表示ifconfig的命令可用。可能出现的错误&#xff1a;ifconfig command no foun…...

年轻人为啥热衷去寺庙?

年轻人的苦&#xff0c;寺庙最清楚。 周末的寺庙挤满了年轻人&#xff0c;北京雍和宫限流了&#xff0c;杭州灵隐寺十八籽的手串限购了&#xff0c;南京鸡鸣寺从地铁站出口就开始排队了...... “上班和上学&#xff0c;你选择哪个&#xff1f;” ”我选择上香“ 工作和学习…...

Java Spring 框架

当今世界&#xff0c;Java Spring 成为了最流行的 Java 开发框架之一。Spring 框架是一个轻量级的、高效的框架&#xff0c;它是 Java 应用程序开发的理想选择。在本文中&#xff0c;我们将深入探讨 Java Spring 框架的特性、优点以及如何使用它来构建高质量的应用程序。 1.Ja…...

基于OpenCV的人脸识别

目录 &#x1f969; 前言 &#x1f356; 环境使用 &#x1f356; 模块使用 &#x1f356; 模块介绍 &#x1f356; 模块安装问题: &#x1f969; OpenCV 简介 &#x1f356; 安装 OpenCV 模块 &#x1f969; OpenCV 基本使用 &#x1f356; 读取图片 &#x1f357; 【…...

一文带你看懂电压放大器和功率放大器的区别

很多人对于电压放大器和功率放大器总是分不太清&#xff0c;在实际应用过程中&#xff0c;电压放大器和功率放大器所起到的作用都是相同的。对于功率放大器和电压放大器的区别&#xff0c;今天就让安泰电子来带我们一起看看。功率放大器和电压放大器的主要区别是&#xff1a;功…...

C++虚函数与多态

C虚函数与多态虚函数抽象类纯虚函数虚析构函数多态虚函数的几个问题纯虚函数和ADT虚函数 virtual修饰的成员函数就是虚函数&#xff0c; 1.虚函数对类的内存影响&#xff1a;增加一个指针类型大小&#xff08;32位和64位&#xff09; 2.无论有多少个虚函数&#xff0c;只增加一…...

蓝桥杯Web前端练习-----渐变色背景生成器

介绍 相信做过前端开发的小伙伴们对渐变色在 UI 设计中的流行度一定不陌生&#xff0c;网页上也时常可以看到各类复杂的渐变色生成工具。使用原生的 CSS 变量加一些 JS 函数就能做出一个简单的渐变色背景生成器。 现在渐变色生成器只完成了颜色选取的功能&#xff0c;需要大家…...

Python中的微型巨人-Flask

文章目录前言主要内容优点及特性主要使用创建实例定义路由获取请求定制响应渲染Jinja2模板重定向和反向解析抛出HTTP异常总结更多宝藏前言 &#x1f60e;&#x1f973;&#x1f60e;&#x1f920;&#x1f62e;&#x1f916;&#x1f648;&#x1f4ad;&#x1f373;&#x1f…...

密码学中的承诺

Commitment 概述 密码学承诺是一个涉及两方的二阶段交互协议&#xff0c;双方分别为承诺方和接收方。简述来说&#xff0c;它的功能涵盖不可更改性和确定性。 承诺方发送的消息密文&#xff0c;一旦发出就意味着不会再更改&#xff0c;而接收方收到这个消息可以进行验证结果。…...

redis入门实战一、五种数据结构的基本操作(二)

redis入门实战一、五种数据结构的基本操作【二】 一、String1)、set2)、getset3)、msetnx 给多个元素赋值,原子操作4)、字符串 追加 & 取部分数据5)、数值可以做加减,指定增量大小6)、获取长度7)、 bitmap①、setbit②、bitop 二进制与或运算(效率高)③、bitcou…...

day13 模块和异常捕获总结

day13 模块和异常捕获 一、生成器 &#xff08;一&#xff09;、什么是生成器 1&#xff09;容器&#xff08;是一种可以创建多个数据的容器&#xff09;&#xff0c;生成器中保存的是创建数据的方法&#xff0c;而不是数据本身。2&#xff09;特点&#xff1a; a. 打印生成…...

【Linux】进程优先级 环境变量

进程优先级 环境变量 一、进程优先级1、基本概念2、查看以及修改系统进程的优先级3、一些其他的关于进程优先级的指令和函数调用4、与进程优先级有关的一些进程性质二、环境变量1、基本概念2、和环境变量相关的命令3、Linux中的常见环境变量介绍4、环境变量的组织方式以及在C代…...

UE实现建筑分层抽屉展示效果

文章目录 1.实现目标2.实现过程2.1 基础设置2.2 核心函数3.参考资料1.实现目标 使用时间轴对建筑楼层的位置偏移进行控制,实现分层抽屉的动画展示效果。 2.实现过程 建筑抽屉的实现原理比较简单,即对Actor的位置进行偏移,计算并更新其世界位置即可。这里还是基于ArchVizExp…...

【C语言进阶:刨根究底字符串函数】 strstr 函数

本节重点内容&#xff1a; 深入理解strstr函数的使用学会strstr函数的模拟实现⚡strstr strstr的基本使用&#xff1a; #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include<string.h>int main() {char arr1[] "abcdebcdef";char arr2[] &…...

SpringBoot实战(十二)集成Actuator

目录一、简介二、Maven依赖三、使用入门1.HTTP 方式访问端点2.JMX 方式访问端点3.端点信息整理4.端点的启用与禁用5.端点的公开6.保护 HTTP 端点7.配置 CORS 跨域官方文档&#xff1a; https://docs.spring.io/spring-boot/docs/2.4.5/reference/htmlsingle/#production-ready …...

学习系统编程No.7【进程替换】

引言&#xff1a; 北京时间&#xff1a;2023/3/21/7:17&#xff0c;这篇博客本来昨天晚上就能开始写的&#xff0c;但是由于笔试强训的原因&#xff0c;导致时间用在了做题上&#xff0c;通过快2个小时的垂死挣扎&#xff0c;我充分意识到了自己做题能力的缺陷和运用新知识的缺…...

【3.22】操作系统内存管理(整理)、Java并发

3. 内存管理 为什么要有虚拟内存&#xff1f; 我们想要同时在内存中运行多个程序&#xff0c;就需要把进程所使用的地址隔离&#xff0c;所以使用了虚拟内存。简单来说&#xff0c;虚拟内存地址是程序使用的内存地址。物理内存地址是实际存在硬件里面的地址。 操作系统为每个…...

电脑文件丢失怎么找回来

电脑文件丢失怎么找回来?最近打开电脑时&#xff0c;它启动得很慢。刚刚开始我没有没在意&#xff0c;就重启了当我再次打开电脑时&#xff0c;发现桌面上的文件消失了&#xff0c;面对这种意外情况&#xff0c;有什么办法可以快速找到呢? 电脑文件丢失后&#xff0c;想要找回…...

铭豹扩展坞 USB转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

k8s业务程序联调工具-KtConnect

概述 原理 工具作用是建立了一个从本地到集群的单向VPN&#xff0c;根据VPN原理&#xff0c;打通两个内网必然需要借助一个公共中继节点&#xff0c;ktconnect工具巧妙的利用k8s原生的portforward能力&#xff0c;简化了建立连接的过程&#xff0c;apiserver间接起到了中继节…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...