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

vite项目使用qiankun构建hash路由微前端

文章目录

  • 前言
  • 一、主应用使用react@18 + react-router-dom@6
    • 1、项目安装
    • 2、主应用中注册微应用
    • 3、主应用中设置路由和挂载子应用的组件
  • 二、创建react@18 + react-router-dom@6子应用
    • 1、项目安装
    • 2、修改子应用 vite.config.ts
    • 3、修改子应用 main.tsx,区分qiankun环境和独立部署环境
    • 4、子应用路由需要增加basename配置,用来匹配qiankun环境
  • 三、创建vue3 + vue-router4子应用
    • 1、项目安装
    • 2、修改子应用 vite.config.ts
    • 3、修改子应用 main.ts,区分qiankun环境和独立部署环境
  • 四、主应用使用vue3 + vue-router4
    • 1、项目安装
    • 2、主应用中注册微应用
    • 3、主应用中设置路由和挂载子应用的组件
  • 总结


前言

本文主要介绍 hash路由 模式的微前端,项目都是基于vite构建,采用qiankun架构,实现方式主要分为两种类型:

  1. 主应用使用react@18 + react-router-dom@6,微应用分别使用react@18 + react-router-dom@6、vue3 + vue-router4
  2. 主应用使用vue3 + vue-router4,微应用分别使用react@18 + react-router-dom@6、vue3 + vue-router4

一、主应用使用react@18 + react-router-dom@6

1、项目安装

使用vite构建主应用项目,主应用需要安装qiankun,源码地址

代码如下(示例):

构建项目
pnpm create vite react-app --template react-ts
安装路由
pnpm add react-router-dom
安装qiankun
pnpm add qiankun

2、主应用中注册微应用

代码如下(示例):主应用main.tsx入口文件添加如下代码

registerMicroApps([{name: "microReactApp",// 子应用名称entry: "http://localhost:8081",// 子应用地址container: "#subapp-viewport",// 子应用挂在主应用的某个id标签下activeRule: "#/microReactApp",// 子应用触发的路由匹配,hash模式需要(#)},{name: "microVueApp",entry: "http://localhost:8082",container: "#subapp-viewport",activeRule: "#/microVueApp",},],{beforeLoad: [(app) => {console.log("[LifeCycle] before load %c%s", "color: green;", app.name);return Promise.resolve();},],beforeMount: [(app) => {console.log("[LifeCycle] before mount %c%s", "color: green;", app.name);return Promise.resolve();},],afterUnmount: [(app) => {console.log("[LifeCycle] after unmount %c%s","color: green;",app.name);return Promise.resolve();},],}
);
start();

3、主应用中设置路由和挂载子应用的组件

代码如下(示例):主应用路由设置匹配微应用,MicroContain 组件是用来挂在子应用

const router = createHashRouter(
[{path: "microReactApp/*",element: <MicroContain />,},{path: "microVueApp/*",element: <MicroContain />,},
]
)
// MicroContain 组件
const MicroContain = () => {return (<>//subapp-viewport就是上面registerMicroApps的containerz字段用到的id<div id="subapp-viewport" /> </>);
};
export default MicroContain;

二、创建react@18 + react-router-dom@6子应用

1、项目安装

使用vite构建主应用项目,子应用不需要安装qiankun,但是子应用需要安装vite-plugin-qiankun插件,用来解决引用module的错误,源码地址

代码如下(示例):

构建项目
pnpm create vite micro-react-app --template react-ts
安装路由
pnpm add react-router-dom
安装qiankun
pnpm add vite-plugin-qiankun -D

2、修改子应用 vite.config.ts

代码如下(示例):

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
import qiankun from "vite-plugin-qiankun";export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd(), "");const isDev = env.VITE_APP_ENV == "development";return {plugins: [// microReactApp 要和主应用注册子应用时的名称一样(registerMicroApps的name属性)qiankun("microReactApp", {useDevMode: isDev,}),!isDev && react(),],server: {port: 8081,},};
});

3、修改子应用 main.tsx,区分qiankun环境和独立部署环境

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
import {renderWithQiankun,qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";// ReactDOM.createRoot(document.getElementById("root")!).render(
//   <React.StrictMode>
//     <App />
//   </React.StrictMode>
// );
let instance: any;const render = (props?: any) => {const { container } = props;const rootDom = container? container.querySelector("#root"): document.querySelector("#root");instance = ReactDOM.createRoot(rootDom!);instance.render(<React.StrictMode><App /></React.StrictMode>);
};// some code
renderWithQiankun({mount(props) {console.log("mount");render(props);},bootstrap() {console.log("bootstrap");},unmount(props: any) {console.log("unmount", props);instance.unmount();},update(props: any) {console.log("system app update", props);// console.log(props)},
});if (!qiankunWindow.__POWERED_BY_QIANKUN__) {render({});
}

4、子应用路由需要增加basename配置,用来匹配qiankun环境

代码如下(示例):

import { qiankunWindow } from "vite-plugin-qiankun/dist/helper";
const router = createHashRouter(
[{index: true, // 默认加载的子路由 使用 index 代替 pathelement: <Home />,}
],
{basename: qiankunWindow.__POWERED_BY_QIANKUN__ ? "/microReactApp" : "/",
}
)

三、创建vue3 + vue-router4子应用

1、项目安装

使用vite构建主应用项目,子应用不需要安装qiankun,但是子应用需要安装vite-plugin-qiankun插件,用来解决引用module的错误,源码地址

代码如下(示例):

构建项目
pnpm create vite micro-vue-app --template vue-ts
安装路由
pnpm add vue-router
安装qiankun
pnpm add vite-plugin-qiankun -D

2、修改子应用 vite.config.ts

代码如下(示例):

import { defineConfig, loadEnv } from "vite";
import path from "path";
import vue from "@vitejs/plugin-vue";
import qiankun from "vite-plugin-qiankun";// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {const env = loadEnv(mode, process.cwd(), "");const isDev = env.VITE_APP_ENV == "development";return {resolve: {alias: {"@": path.resolve(__dirname, "./src"),},},plugins: [// microVueApp要和主应用注册子应用时的名称一样(registerMicroApps的name属性)qiankun("microVueApp", {useDevMode: isDev,}),vue(),],css: {preprocessorOptions: {less: {javascriptEnabled: true,},},},server: {port: 8082,},};
});

3、修改子应用 main.ts,区分qiankun环境和独立部署环境

代码如下(示例):路由列表

const routes = [{path: "/",name: "home",component: () => import("@/views/home/index.vue"),}, // 懒加载{path: "/about",name: "about",component: () =>import(/* webpackChunkName: "about-chunk" */ "@/views/about/index.vue"),}, // 懒加载 - 加分包about-chunk{path: "/route",name: "route",component: () => import("@/views/route/index.vue"),}, // 懒加载
];

代码如下(示例):

import { App, createApp } from "vue";
import "./style.css";
import AppComponent from "./App.vue";
import {renderWithQiankun,qiankunWindow,
} from "vite-plugin-qiankun/dist/helper";
import routes from "./router";
import { createWebHashHistory, createRouter } from "vue-router";let app: App;
function render(props: any) {const { container } = props;let newRoutes = routes;if (qiankunWindow.__POWERED_BY_QIANKUN__) {/*** 这里的路由需要缓存到pinia或者localstorage,用于渲染菜单* routes多级菜单需要做递归处理,这个只展示一级*/newRoutes = routes.map((item) => {return {...item,path: `/microVueApp${item.path}`,};});}const router = createRouter({history: createWebHashHistory(),routes: newRoutes,});app = createApp(AppComponent);app.use(router).mount(container ? container.querySelector("#app") : "#app");
}// some code
renderWithQiankun({mount(props) {console.log("mount");render(props);},bootstrap() {console.log("bootstrap");},unmount(props: any) {console.log("unmount", props, app);app.unmount();},update(props: any) {console.log("system app update", props);// console.log(props)},
});if (!qiankunWindow.__POWERED_BY_QIANKUN__) {render({});
}

四、主应用使用vue3 + vue-router4

1、项目安装

使用vite构建主应用项目,主应用需要安装qiankun,源码地址

代码如下(示例):

构建项目
pnpm create vite vue-app --template vue-ts
安装路由
pnpm add react-router-dom
安装qiankun
pnpm add qiankun

2、主应用中注册微应用

代码如下(示例):主应用main.ts入口文件添加如下代码,和react主应用相比,在这里没有执行start(),应为刷新时会报错挂载的节点没有加载,所以在挂载的组件中执行start(),

import { App, createApp } from "vue";
import "./style.css";
import AppComponent from "./App.vue";
import router from "./router";
import { registerMicroApps } from "qiankun";createApp(AppComponent).use(router).mount("#app");registerMicroApps([{name: "microReactApp",entry: "http://localhost:8081",container: "#subapp-viewport",activeRule: "#/microReactApp",},{name: "microVueApp",entry: "http://localhost:8082",container: "#subapp-viewport",activeRule: "#/microVueApp",},],{beforeLoad: [(app) => {console.log("[LifeCycle] before load %c%s", "color: green;", app.name);return Promise.resolve();},],beforeMount: [(app) => {console.log("[LifeCycle] before mount %c%s", "color: green;", app.name);return Promise.resolve();},],afterUnmount: [(app) => {console.log("[LifeCycle] after unmount %c%s","color: green;",app.name);return Promise.resolve();},],}
);

3、主应用中设置路由和挂载子应用的组件

代码如下(示例):主应用路由设置匹配微应用,micro组件是用来挂在子应用

import { createWebHashHistory, createRouter } from "vue-router";const routes = [{path: "/",name: "home",component: () => import("@/views/home/index.vue"),}, // 懒加载{path: "/about",name: "about",component: () =>import(/* webpackChunkName: "about-chunk" */ "@/views/about/index.vue"),}, // 懒加载 - 加分包{path: "/route",name: "route",component: () => import("@/views/route/index.vue"),}, // 懒加载{path: "/microVueApp/:pathMatch(.*)*",// path: "/microVueApp/:chapters*",name: "microVueApp",component: () => import("@/views/micro/index.vue"),}, // 懒加载{path: "/microReactApp/:pathMatch(.*)*",// path: "/microVueApp/:chapters*",name: "microReactApp",component: () => import("@/views/micro/index.vue"),}, // 懒加载
];const router = createRouter({history: createWebHashHistory(),routes,
});export default router;

代码如下(示例):挂在组件

<template><div id="subapp-viewport"></div>
</template><script setup lang="ts">
import { start } from "qiankun";
import { onMounted } from "vue";onMounted(() => {if (!(window as any)?.qiankunStarted) {(window as any).qiankunStarted = true;start();}
});
</script>

总结

在使用两种不同的主应用去分别挂在两个子应用,发现两个大的区别

  1. 主应用qiankun的start()开启的地方
  • react项目可以在入口文件main.tsx中注册子应用后直接开启start()。
  • vue项目只能在组件挂在的时候去开启start(),否则会在页面刷新的时候,报错不存在挂在节点。
  1. 就是vue-router4和react-dom-router两个路由作为子应用的区别
  • 子应用中react-dom-router只需要在路由创建的时候添加basename,就可以很轻松配合主应用qiankun注册时的activeRule实现子应用的路由点击
  • 子应用vue-router4需要修改整个路由map,添加activeRule前缀,如果是已有的项目改造,就比较麻烦,需要递归路由表,还有路由组件的route-link的to地址,封装编程式导航的事件

相关文章:

vite项目使用qiankun构建hash路由微前端

文章目录 前言一、主应用使用react18 react-router-dom61、项目安装2、主应用中注册微应用3、主应用中设置路由和挂载子应用的组件 二、创建react18 react-router-dom6子应用1、项目安装2、修改子应用 vite.config.ts3、修改子应用 main.tsx,区分qiankun环境和独立部署环境4、…...

通过rpmbuild构建Elasticsearch-7.14.2-search-guard的RPM包

系列文章目录 rpmbuild从入门到放弃 search-guard插件使用入门手册 文章目录 系列文章目录前言一、资源准备二、spec文件1.基础信息2.%prep3.%Install4.%file5.%post6.%postun 三、成果演示1.执行构建过程图示例2.执行安装RPM包示例3.进程检查4.访问esApi 总结 前言 不管是源…...

js 图片放大镜

写购物项目的时候&#xff0c;需要放大图片&#xff0c;这里用js写了一个方法&#xff0c;鼠标悬浮的时候放大当前图片 这个是class写法 <!--* Descripttion: * Author: 苍狼一啸八荒惊* LastEditTime: 2024-07-10 09:41:34* LastEditors: 夜空苍狼啸 --><!DOCTYPE …...

数据模型-ER图在数据模型设计中的应用

ER图在数据模型设计中的应用 1. ER图概述&#xff1a;起源与发展​ 实体-关系图&#xff08;Entity Relationship Diagram&#xff0c;简称ER图&#xff09;起源于1970年代&#xff0c;由Peter Chen首次提出&#xff0c;作为描述数据和信息间关系的图形化语言。随着数据库技术…...

C++ //练习 14.46 你认为应该为Sales_data类定义上面两种类型转换运算符吗?应该把它们声明成explicit的吗?为什么?

C Primer&#xff08;第5版&#xff09; 练习 14.46 练习 14.46 你认为应该为Sales_data类定义上面两种类型转换运算符吗&#xff1f;应该把它们声明成explicit的吗&#xff1f;为什么&#xff1f; 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&…...

tensorflow张量生成以及常用函数

张量tensor&#xff1a;多维数组&#xff08;列表&#xff09; 阶&#xff1a;张量的维数 维数 阶 名字 例子 0-D 0 标量 scalar s 1&#xff0c; 2&#xff0c; 3 1-D 1 向量 vector…...

如何在 Windows 10 上恢复未保存的 Word 文档

您是否整晚都在处理一个重要的 word 文件&#xff0c;但忘记保存它了&#xff1f;本文适合您。在这里&#xff0c;我们将解释如何恢复未保存的 word 文档。除此之外&#xff0c;您还将学习如何恢复已删除的 word 文档。 从专业人士到高中生&#xff0c;每个人都了解丢失重要 W…...

Rust入门实战 编写Minecraft启动器#3解析资源配置

首发于Enaium的个人博客 在上一篇文章中&#xff0c;我们已经建立了资源模型&#xff0c;接下来我们需要解析游戏的配置文件。 首先我们添加serde_json依赖和model依赖。 model { path "../model" } serde_json "1.0"之后我们在lib.rs中添加解析的tra…...

openFileInput 内部保持的数据如何删除

在Android中&#xff0c;openFileInput 是用于从设备内部存储中读取文件的API&#xff0c;但它本身并不提供直接删除文件的功能。要删除通过 openFileInput 读取的文件&#xff0c;你需要使用其他方法。以下是如何删除内部存储中文件的步骤和说明&#xff1a; 步骤 获取文件路…...

Python编写的俄罗斯方块小游戏

文章目录 游戏页面实现代码 游戏页面 左右键移动方块位置&#xff0c;上键切换方块形态。 实现代码 import pygame import random# 初始化 Pygame pygame.init()# 定义颜色 colors [(0, 0, 0), # 黑色(255, 0, 0), # 红色(0, 255, 0), # 绿色(0, 0, 255), # 蓝色(255,…...

前端直连小票打印机,前端静默打印,js静默打印解决方案

最近公司开发了一个vue3收银系统&#xff0c;需要使用小票打印机打印小票&#xff0c;但是又不想结账的时候弹出打印预览&#xff0c;找了很多方案&#xff0c;解决不了js打印弹出的打印预览窗口&#xff01; 没办法&#xff0c;自己写了一个winform版本的静默打印软件&#xf…...

python批量读取Excel数据写入word

from docx import Document from docx.shared import Pt from docx.enum.table import WD_TABLE_ALIGNMENT, WD_ROW_HEIGHT_RULE import os import pandas as pd from docx import Document from docx.oxml.ns import qn from docx.shared import Pt # ... 其他代码 ... work…...

Unity 常用取整方法

向下取整&#xff1a;Mathf.FloorToInt&#xff08;&#xff09; 向上取整&#xff1a;Math.Ceiling 截断取整&#xff1a;(int) 四舍五入&#xff1a;Mathf.RoundToInt e.NewValues.value.ToString(“F0”) 百分比&#xff1a; int i 400; int j 200; string p ((double)i…...

Apache Seata Mac下的Seata Demo环境搭建

本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 本文来自 Apache Seata官方文档&#xff0c;欢迎访问官网&#xff0c;查看更多深度文章。 Mac下的Seata Demo环境搭建&#xff08;AT模式&#xff09; 前言 最近因为工作需要&#xf…...

记录|C#安装+HslCommunication安装

记录线索 前言一、C#安装1.社区版下载2.VS2022界面设置 二、HslCommunication安装1.前提2.安装3.相关文件【重点】 更新记录 前言 初心是为了下次到新的电脑上安装VS2022做C#上机位项目时能快速安装成功。 一、C#安装 1.社区版下载 Step1. 直接点击VS2022&#xff0c;跳转下…...

Android 12系统源码_设备设置(一)Settings介绍

前言 Settings 类是一个用于访问和管理设备设置的关键类&#xff0c;而作为系统开发人员&#xff0c;经常需要用这个类来做一些系统设备设置&#xff0c;而Settings里面存在着好几个处理不同领域的设备设置类&#xff0c;那么如何才能结合自己的业务场景正确选择使用这些设备设…...

如何查看GD32 Keil和IAR工程的map文件

我们在设计调试程序时&#xff0c;往往需要知道一个函数或一个变量它在MCU中具体所在的地址以及所占用的空间大小&#xff0c;这时候就需要查看map文件。 那么什么是map文件呢&#xff1f;map文件是编译器编译工程后生成的一个文件&#xff0c;文件会有很多信息&#xff0c;比…...

1Panel安装命令脚本大全,多Linux操作系统版本

1Panel安装命令脚本大全&#xff0c;包括RedHat、CentOS、Ubuntu、Debian和openEuler等linux操作系统&#xff0c;码笔记整理1Panel安装命令脚本清单&#xff1a; RedHat/CentOS安装命令&#xff1a; curl -sSL https://resource.fit2cloud.com/1panel/package/quick_start.sh…...

校园电动车安全监控和调度系统-计算机毕业设计源码13028

摘要 校园电动车安全监控和调度系统是为了确保校园内电动车的安全和高效运行而设计的。该系统通过安装在电动车上的监控设备&#xff0c;实时监测电动车的运行状态&#xff0c;包括速度、位置、电池电量等&#xff0c;一旦发现异常情况&#xff0c;系统会立即发出警报并通知相关…...

【LLM之Agent】ReAct论文阅读笔记

研究背景 论文介绍了 “ReAct” 范式&#xff0c;该范式旨在融合推理和行动的功能&#xff0c;通过让大型语言模型&#xff08;LLMs&#xff09;生成既包括言语推理轨迹又包括行动序列的输出&#xff0c;解决多种语言推理和决策任务。这种方法允许模型在与外部环境&#xff08…...

日语AI面试高效通关秘籍:专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

Python爬虫(二):爬虫完整流程

爬虫完整流程详解&#xff08;7大核心步骤实战技巧&#xff09; 一、爬虫完整工作流程 以下是爬虫开发的完整流程&#xff0c;我将结合具体技术点和实战经验展开说明&#xff1a; 1. 目标分析与前期准备 网站技术分析&#xff1a; 使用浏览器开发者工具&#xff08;F12&…...

PL0语法,分析器实现!

简介 PL/0 是一种简单的编程语言,通常用于教学编译原理。它的语法结构清晰,功能包括常量定义、变量声明、过程(子程序)定义以及基本的控制结构(如条件语句和循环语句)。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言,由 Niklaus Wirth 设计,用于展示编译原理的核…...

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

Fabric V2.5 通用溯源系统——增加图片上传与下载功能

fabric-trace项目在发布一年后,部署量已突破1000次,为支持更多场景,现新增支持图片信息上链,本文对图片上传、下载功能代码进行梳理,包含智能合约、后端、前端部分。 一、智能合约修改 为了增加图片信息上链溯源,需要对底层数据结构进行修改,在此对智能合约中的农产品数…...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

[免费]微信小程序问卷调查系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】

大家好&#xff0c;我是java1234_小锋老师&#xff0c;看到一个不错的微信小程序问卷调查系统(SpringBoot后端Vue管理端)【论文源码SQL脚本】&#xff0c;分享下哈。 项目视频演示 【免费】微信小程序问卷调查系统(SpringBoot后端Vue管理端) Java毕业设计_哔哩哔哩_bilibili 项…...

接口自动化测试:HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...