微前端(qiankun)vue3+vite

 

目录

一、什么是微前端

 二、主应用接入 qiankun

1.按照qiankun插件

2.注册微应用引用

 3.挂载容器

三、微应用接入 qiankun

 1.vite.config.ts

2.main.ts

ps:手动加载微应用方式

ps:为什么不用 iframe


一、什么是微前端

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。

微前端架构旨在解决单体应用在一个相对长的时间跨度下,由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)后,随之而来的应用不可维护的问题。这类问题在企业级 Web 应用中尤其常见。

微前端架构具备以下几个核心价值:

  • 技术栈无关
    主框架不限制接入应用的技术栈,微应用具备完全自主权

  • 独立开发、独立部署
    微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

  • 增量升级

    在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

  • 独立运行时
    每个微应用之间状态隔离,运行时状态不共享

 

 二、主应用接入 qiankun

1.按照qiankun插件

yarn add qiankun

2.注册微应用引用

在入口文件main.js中添加如下代码:

import { registerMicroApps, start } from 'qiankun'
registerMicroApps([{name: 'micro-vue-1', // 必须与微应用注册名字相同entry: 'http://localhost:5174', // 入口路径,开发时为微应用所启本地服务,上线时为微应用线上路径container: '#micro-app-container', // 微应用挂载的节点activeRule: '', // 当访问路由为 /micro-vue 时加载微应用props: {msg: '我是来自主应用的值-vue', // 主应用向微应用传递参数},},//   {//     name: 'react-app',//     entry: 'http://127.0.0.1:5175',//     container: '#react-app-container',//     activeRule: '/micro-react',//     props: {//       msg: '我是来自主应用的值-react',//     },//   },]//   {//     // 生命周期钩子函数//     beforeLoad: (app) => {//       console.log('beforeLoad', app)//     },//     beforeMount: (app) => {//       console.log('beforeMount ', app)//     },//     afterMount: (app) => {//       console.log('afterMount', app)//     },//     beforeUnmount: (app) => {//       console.log('beforeUnmount ', app)//     },//     afterUnmount: (app) => {//       console.log('afterUnmount', app)//     },//   }
)//step3 设置默认进入微应用
//setDefaultMountApp('/vue3')start() //启动微应用

 3.挂载容器

  在需要嵌入的地方挂载容器

  <div id="micro-app-container"></div>

三、微应用接入 qiankun

 qiankun 暂不支持 Vite 方式接入,需安装 vite-plugin-qiankun

yarn add vite-plugin-qiankun

 1.vite.config.ts

import { defineConfig } from 'vite'
import qiankun from 'vite-plugin-qiankun'export default defineConfig((mode) => {return {plugins: [qiankun('micro-vue-1', { // 微应用名字,与主应用注册的微应用名字保持一致useDevMode: true,}),],}
})

2.main.ts

import { createApp } from 'vue'
import App from './App.vue'
import {renderWithQiankun,qiankunWindow,QiankunProps,
} from 'vite-plugin-qiankun/dist/helper'const render = (props: QiankunProps = {}) => {const { container } = propsconst app: string | Element = container?.querySelector('#app') || '#app' // 避免 id 重复导致微应用挂载失败createApp(App).mount(app)
}const initQianKun = () => {renderWithQiankun({bootstrap() {console.log('微应用:bootstrap')},mount(props) {// 获取主应用传入数据console.log('微应用:mount', props)render(props)},unmount(props) {console.log('微应用:unmount', props)},update(props) {console.log('微应用:update', props)},})
}qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render() // 判断是否使用 qiankun ,保证项目可以独立运行

ps:手动加载微应用方式

<template><button @click="loadApp">挂载微应用</button><button @click="unloadApp">卸载微应用</button><!-- 提供挂载容器 --><div id="sub-app-container"></div>
</template><script setup lang="ts">
import { ref } from 'vue'
import { loadMicroApp } from 'qiankun'let microApp: any = null // 微应用实例const loadApp = () => {if (microApp) returnmicroApp = loadMicroApp({name: 'micro-vue-1', // 必须与微应用注册名字相同entry: 'http://localhost:5174', // 入口路径,开发时为微应用所启本地服务,上线时为微应用线上路径container: '#micro-app-container',props: {// 主应用向微应用传递参数}})microApp.mountPromise.then(() => {// 微应用加载完成后回调})
}const unloadApp = () => {if (!microApp) returnmicroApp.unmount() // 卸载微应用
}
</script>

ps:为什么不用 iframe

为什么不用 iframe,这几乎是所有微前端方案第一个会被 challenge 的问题。但是大部分微前端方案又不约而同放弃了 iframe 方案,自然是有原因的,并不是为了 "炫技" 或者刻意追求 "特立独行"。

如果不考虑体验问题,iframe 几乎是最完美的微前端解决方案了。

iframe 最大的特性就是提供了浏览器原生的硬隔离方案,不论是样式隔离、js 隔离这类问题统统都能被完美解决。但他的最大问题也在于他的隔离性无法被突破,导致应用间上下文无法被共享,随之带来的开发体验、产品体验的问题。

  1. url 不同步。浏览器刷新 iframe url 状态丢失、后退前进按钮无法使用。
  2. UI 不同步,DOM 结构不共享。想象一下屏幕右下角 1/4 的 iframe 里来一个带遮罩层的弹框,同时我们要求这个弹框要浏览器居中显示,还要浏览器 resize 时自动居中..
  3. 全局上下文完全隔离,内存变量不共享。iframe 内外系统的通信、数据同步等需求,主应用的 cookie 要透传到根域名都不同的子应用中实现免登效果。
  4. 慢。每次子应用进入都是一次浏览器上下文重建、资源重新加载的过程。

 

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

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

相关文章

四、详解Redis集群

一、RDB和AOF持久化 redis的数据一般保存在内存&#xff0c;那么当突然宕机&#xff0c;岂不是数据就丢失了&#xff0c;因此redis实现了将数据持久化的方式&#xff1a;RDB和AOF两种持久化方式。 1.1 RDB持久化&#xff08;bgsave&#xff09; redis支持快照的方式进行数据…

【激光SLAM】激光的前端配准算法

文章目录 ICP匹配方法&#xff08;Point to Point&#xff09;PL-ICP匹配方法&#xff08;Point to Line&#xff09;基于优化的匹配方法&#xff08;Optimization-based Method&#xff09;优化方法的求解地图双线性插值拉格朗日插值法——一维线性插值 相关方法&#xff08;C…

微信小程序按需注入和用时注入

官网链接 按需注入 {"lazyCodeLoading": "requiredComponents" }注意事项 启用按需注入后&#xff0c;小程序仅注入当前访问页面所需的自定义组件和页面代码。未访问的页面、当前页面未声明的自定义组件不会被加载和初始化&#xff0c;对应代码文件将不…

【HarmonyOS】鸿蒙开发之Text组件——第3.2章

text组件属性介绍 textAlign有三种属性start(默认),end,center Column(){//默认文字大小16Text("迪加奥特曼").width(200)Text().margin({top:10,bottom:10})Text("泰罗奥特曼").width(200).fontSize(26).fontColor(Color.Red).textAlign(TextAlign.End)…

H12-821_130

130.如图所示&#xff0c;R1与R2组成一个VRRP备份组1&#xff0c;通过在R1执行vrrp vrid 1 virtual-ip_______命令&#xff0c;可以使其成为IP地址拥有者&#xff0c;让R1为Master, R2为Backup 。 答案&#xff1a;192.168.1.254 注释&#xff1a; IP地址拥有者优先级是255&am…

uniapp富文本文字长按选中(用于复制,兼容H5、APP、小程序三端)

方案&#xff1a;使用u-parse的selectable属性 <u-parse :selectable"true" :html"content"></u-parse> 注意&#xff1a;u-parse直接使用是不兼容小程序的&#xff0c;需要对u-parse进行改造&#xff1a; 1. 查看u-parse源码发现小程序走到以…

程序员金三银四跳槽指南:时间线经典面试16问

祝大家成功上岸&#xff0c;升职加薪&#xff0c;冲鸭 &#x1f389; 金三银四 今天复工&#xff0c;就要开始准备啦&#x1f4bc;✨ 把握好打工人跳槽的金三银四&#xff0c;获得满意的新工作 &#x1f389; 时间线 年后跳槽时间线&#xff0c;过完年刚好开始准备&#xf…

无人机技术,无人机动力系统知识,电机、电调、桨叶技术详解

无人机动力系统中的电机、电调和桨叶技术都是非常重要的部分&#xff0c;以下是对这些技术的详解&#xff1a; 无人机电机 在无人机动力系统中&#xff0c;电机是将电能转化为机械能的关键部件。其主要作用是产生旋转力矩&#xff0c;驱动螺旋桨的旋转&#xff0c;从而实现无…

LeetCode--2298. 周末任务计数

文章目录 1 题目描述2 测试用例3 解题思路 1 题目描述 表: Tasks ------------------- | Column Name | Type | ------------------- | task_id | int | | assignee_id | int | | submit_date | date | -------------------task_id 是该表的主键&#xff08;具有唯一值…

const 知识点解析

当我们在c语言中碰到这么一种情况&#xff1a;我们现在有一个变量&#xff0c; 这个变量呢&#xff0c;我们指向访问它&#xff0c; 但不会修改它。但是又担心在后续的代码中不小心将它修改&#xff0c; 这种情况该怎么做呢&#xff1f;这种情况下可以使用const. 被const修饰的…

数学实验第三版(主编:李继成 赵小艳)课后练习答案(十四)(1)

实验十四&#xff1a;水塔水流量估计模型 练习一 1.海水温度随着深度的变化而变化,海面温度较高,随着深度的增加,海水温度越来越低.通过验观测得一组海水温度t与深度h的数据如下: h/m 0 1.5 2.5 4.6 8.2 12.5 16.5 26.5 t/℃ 23.5 22.9 20.1 19.1 15.4 11.5 …

服务器4c16g中的c指什么?或者4h什么意思?

服务器4c16g中的c指什么&#xff1f;c是指CPU处理器&#xff0c;4c代表4核CPU&#xff0c;4c也可以表示为4h&#xff0c;cpu是处理器中的基本计算单位&#xff0c;服务器的CPU核心数量越多&#xff0c;处理器的计算能力就越强&#xff0c;由于是云服务器&#xff0c;CPU指的是v…

数据在内存中的存储以及百度笔试题

目录 一.整型家族 什么是大小端存储&#xff08;百度笔试题&#xff09; 大端字节序存储 小端字节序存储 为什么要讨论大小端字节序存储 写一个程序判断是大端还是小端存储&#xff08;百度笔试题&#xff09; 思路&#xff1a;用1去判断&#xff0c;如果返回1则是小端&a…

腾讯云4核8G12M服务器支持多少人在线?

4核8G服务器支持多少人同时在线访问&#xff1f;阿腾云的4核8G服务器可以支持20个访客同时访问&#xff0c;关于4核8G服务器承载量并发数qps计算测评&#xff0c;云服务器上运行程序效率不同支持人数在线人数不同&#xff0c;公网带宽也是影响4核8G服务器并发数的一大因素&…

帮管家 CRM init 信息泄露漏洞复现 [附POC]

文章目录 帮管家 CRM init 信息泄露漏洞复现 [附POC]0x01 前言0x02 漏洞描述0x03 影响版本0x04 漏洞环境0x05 漏洞复现1.访问漏洞环境2.构造POC3.复现帮管家 CRM init 信息泄露漏洞复现 [附POC] 0x01 前言 免责声明:请勿利用文章内的相关技术从事非法测试,由于传播、利用此…

Open CASCADE学习|曲线向曲面投影

在三维空间中&#xff0c;将曲线向曲面投影通常涉及复杂的几何计算。这个过程可以通过多种方法实现&#xff0c;但最常见的是使用数学和几何库&#xff0c;如OpenCASCADE&#xff0c;来处理这些计算。 在OpenCASCADE中&#xff0c;投影曲线到曲面通常涉及以下步骤&#xff1a;…

面试题-02

1.什么是Java程序的主类&#xff1f;应用程序和小程序的主类有何不同&#xff1f; 一个程序中可以有多个类&#xff0c;但只能有一个类是主类。在Java应用程序中&#xff0c;这个主类是指包含main()方法的类。而在Java小程序中&#xff0c;这个主类是一个继承自系统类JApplet或…

RocketMq——NameServer源码分析

摘要 RocketMQ架构体系里有四个角色&#xff1a;NameServer、Broker、Producer、Consumer。其中&#xff0c;Broker统称为服务端&#xff0c;Producer属于消息生产者和Consumer属于消息消费者&#xff0c;他们统称为客户端。客户端要如何与服务端通信&#xff1f;拿消息发送举…

【LeetCode每日一题】单调栈 901股票价格跨度

901. 股票价格跨度思路 设计一个算法收集某些股票的每日报价&#xff0c;并返回该股票当日价格的 跨度 。 当日股票价格的 跨度 被定义为股票价格小于或等于今天价格的最大连续日数&#xff08;从今天开始往回数&#xff0c;包括今天&#xff09;。 例如&#xff0c;如果未来…

elementui 中 el-date-picker 控制选择当前年之前或者之后的年份

文章目录 需求分析 需求 对 el-date-picker控件做出判断控制 分析 给 el-date-picker 组件添加 picker-options 属性&#xff0c;并绑定对应数据 pickerOptions html <el-form-item label"雨量年份&#xff1a;" prop"date"><el-date-picker …