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地址，封装编程式导航的事件

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

mybatis-plus中的方法的作用

mybatis-plus中的方法的作用

在MyBatis-Plus中&#xff0c;这些方法是用于构建查询条件或排序条件的工具&#xff0c;它们大多属于com.baomidou.mybatisplus.core.conditions.query.QueryWrapper、UpdateWrapper或类似的包装器类中&#xff0c;用于构建复杂的SQL查询或更新语句。这些方法通过链式调用的方式…
阅读更多...
【割点 C++BFS】2556. 二进制矩阵中翻转最多一次使路径不连通

【割点 C++BFS】2556. 二进制矩阵中翻转最多一次使路径不连通

本文涉及知识点 割点 图论知识汇总 CBFS算法 LeetCode2556. 二进制矩阵中翻转最多一次使路径不连通 给你一个下标从 0 开始的 m x n 二进制 矩阵 grid 。你可以从一个格子 (row, col) 移动到格子 (row 1, col) 或者 (row, col 1) &#xff0c;前提是前往的格子值为 1 。如…
阅读更多...
日志无界：Eureka中服务的分布式日志记录策略

日志无界：Eureka中服务的分布式日志记录策略

日志无界&#xff1a;Eureka中服务的分布式日志记录策略 引言 在微服务架构中&#xff0c;服务的分布式日志记录对于监控、故障排查和安全审计至关重要。Eureka作为Netflix开源的服务发现框架&#xff0c;虽然本身不直接提供日志记录功能&#xff0c;但可以与其他日志记录工具…
阅读更多...
AE常用工具

AE常用工具

目录 图形工具&#xff08;快捷键Q&#xff09; 选取工具&#xff08;快捷键V&#xff09; 抓手工具&#xff08;快捷键H或空格&#xff09; 放缩工具&#xff08;快捷键Z或滚动滑轮&#xff09; 图形工具&#xff08;快捷键Q&#xff09; 按住alt并点击&#xff0c;可切换…
阅读更多...
单目深度估计部署 rk3588

单目深度估计部署 rk3588

搞了一小段时间的单目深度估计&#xff0c;目标是在板端部署用起来&#xff0c;但由于基于开源数据或开源模型&#xff0c;将模型估计的相对深度转换成绝对深度误差非常大&#xff08;或许是转换方法有问题&#xff09;&#xff0c;另一方面如何具体的在项目中用起来还没好的想…
阅读更多...
huggingface登不进去？

huggingface登不进去？

HF-Mirror点这个镜像网站
阅读更多...
二重积分 - 包括计算方法和可视化

二重积分 - 包括计算方法和可视化

二重积分 - 包括计算方法和可视化 flyfish 计算在矩形区域 R [ 0 , 1 ] [ 0 , 2 ] R [0, 1] \times [0, 2] R[0,1][0,2] 下&#xff0c;函数 z 8 x 6 y z 8x 6y z8x6y 的二重积分。这相当于计算曲面 z 8 x 6 y z 8x 6y z8x6y 与 xy 平面之间的体积。 二重积分…
阅读更多...
【LeetCode】赎金信

【LeetCode】赎金信

目录 一、题目二、解法完整代码 一、题目 给你两个字符串&#xff1a;ransomNote 和 magazine &#xff0c;判断 ransomNote 能不能由 magazine 里面的字符构成。 如果可以&#xff0c;返回 true &#xff1b;否则返回 false 。 magazine 中的每个字符只能在 ransomNote 中使…
阅读更多...
UMI HTTP接口手册

UMI HTTP接口手册

Translate to English 命令行手册&#xff1a; README_CLI.mdHTTP接口手册&#xff1a; README_HTTP.md HTTP接口手册 &#xff08;本文档仅适用于 Umi-OCR 最新版本。旧版本请查看 Github备份分支 中对应版本的文档。&#xff09; 基础说明 如上图&#xff0c;必须允许HTT…
阅读更多...
MySQL篇五：基本查询

MySQL篇五：基本查询

文章目录 前言1. Create1.1 单行数据 全列插入1.2 多行数据 指定列插入1.3 插入否则更新1.4 替换 2. Retrieve2.1 SELECT 列2.1.1 全列查询2.1.2 指定列查询2.1.3 查询字段为表达式2.1.4 为查询结果指定别名2.1.5 结果去重 2.2 WHERE 条件2.2.1 练习 2.3 结果排序2.3.1 练习 …
阅读更多...
Java内存区域与内存溢出异常（补充）

Java内存区域与内存溢出异常（补充）

2.2.5 方法区 方法区(Method Area)与Java堆一样&#xff0c;是各个线程共享的内存区域&#xff0c;它用于存储已被虚拟机加载的类型信息、常量、静态变量、即时编译器编译后的代码缓存等数据。虽然《Java虚拟机规范》中把方法区描述为堆的一个逻辑部分&#xff0c;但是它却有一…
阅读更多...
分布式事务Seata AT 详解

分布式事务Seata AT 详解

AT模式 一阶段&#xff1a; 向seata server端申请全局事务id&#xff0c;传递给下游参与服务 执行各个本地事务&#xff0c;在事务执行前后记录seata自己的undo log/imag (用于回滚&#xff09;到表中&#xff0c;该表为根据官网手动创建 各个本地事务申请全局锁 申请成功提…
阅读更多...
2024浙江外国语学院汉语桥线上项目 “在杭州，看见更好的中国”开班

2024浙江外国语学院汉语桥线上项目 “在杭州，看见更好的中国”开班

7月9日上午&#xff0c;由教育部中外语言交流合作中心主办、浙江外国语学院国际商学院承办的2024汉语桥“在杭州&#xff0c;看见更好的中国”线上项目正式启动。项目负责人何骅老师及汉语桥教师团队&#xff0c;与来自越南、缅甸、日本、俄罗斯的100名学员相聚云端&#xff0c…
阅读更多...
Nginx配置基础

Nginx配置基础

ect/nginx/nginx.conf配置 1&#xff09;nginx 相关目录 工作目录&#xff1a;ect/nginx 家目录 执行文件&#xff1a;/usr/sbin/nginx 启动或重载 sudo /usr/sbin/nginx -t 检查配置文件 sudo /usr/sbin/nginx -s reload 重启服务 日志文件&#xff1a;/var/log/nginx 启动文…
阅读更多...
计算机视觉研究方向初学习，计算机视觉都有什么方向？？！到底是干什么的？！

计算机视觉研究方向初学习，计算机视觉都有什么方向？？！到底是干什么的？！

计算机视觉研究方向初学习&#xff0c;计算机视觉都有什么方向&#xff1f;&#xff1f;&#xff01;到底是干什么的&#xff1f;&#xff01; 语义分割图像分类目标检测和定位实例分割、全景分割物体跟踪姿态估计人脸识别人体识别图像增强风格迁移图像生成视觉问答视频分析光学…
阅读更多...
relocatex getwd

relocatex getwd

bindtextdom.obj : error LNK2019: unresolved external symbol relocatex referenced in function libintl_bindtextdomain dcigettext.obj : error LNK2019: unresolved external symbol getwd referenced in function libintl_dcigettext
阅读更多...
3102.最小化曼哈顿距离

3102.最小化曼哈顿距离

解题思路 分析时间复杂度&#xff0c;计算任意两点的曼哈顿距离达到 O ( n 2 ) O(n^2) O(n2)&#xff0c;会超时需要优化。 因此优化可以将曼哈顿距离与切比雪夫距离的相互关系找出来&#xff0c;然后转换成求切比雪夫距离的方式&#xff0c;得到 d i s t a n c e ( A , B ) …
阅读更多...
SpringBoot实战：轻松实现接口数据脱敏

SpringBoot实战：轻松实现接口数据脱敏

文章目录 引言一、接口数据脱敏概述1.1 接口数据脱敏的定义1.2 接口数据脱敏的重要性1.3 接口数据脱敏的实现方式 二、开发环境三、实现接口返回数据脱敏3.1 添加依赖3.2 创建自定义注解3.3 定义脱敏枚举类3.4 创建自定义序列化类 四、测试4.1 编写测试代码4.2 测试 五、总结 引…
阅读更多...
vmware workstation安装debian虚拟机有时无法访问windows共享文件夹

vmware workstation安装debian虚拟机有时无法访问windows共享文件夹

问题 安装好debian12之后&#xff0c;已经按要求安装了vmhgfs工具&#xff0c;然后进行文件共享&#xff0c;是可以连接上的&#xff0c;但重启虚拟机后&#xff0c;共享文件夹就无法访问了 解决办法&#xff0c;参考&#xff1a;在 Linux 客户机中装载共享文件夹的办法 vmh…
阅读更多...
C++基础（七）：类和对象（中-2）

C++基础（七）：类和对象（中-2）

上一篇博客学的默认成员函数是类和对象的最重要的内容&#xff0c;相信大家已经掌握了吧&#xff0c;这一篇博客接着继续剩下的内容&#xff0c;加油&#xff01; 目录 一、const成员&#xff08;理解&#xff09; 1.0 引入 1.1 概念 1.2 总结 1.2.1 对象调用成员函数 …
阅读更多...
最新文章

Copyright @ 2022~2023