本文将针对微前端框架 qiankun 的源码进行深入解析，在源码讲解之前，我们先来了解一下什么是 微前端。微前端 是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 N
{
# 1、全局块
# 开启线程数，最大值可设逻辑CPU核数
work_processes 4;
# 定位全局错误日志文件，级别以notice显示，还有debug,info,warn,error,crit模式，debug输出最多，crir输出最少，根据实际环境而定
error_log logs/error.log;
error_log logs/error
背景：公司研发的项目主要是 GIS地图为基础的管理系统，由主体项目（管理业务模块）+ GIS地图应用，由于 GIS地图应用模块 会在多个地方使用，所以单独构建一个项目，分别在不同的业务场景中引用、交互，也在app中通过webview通信使用，之前一直使用iframe的通信方式，iframe基本也可以满足业务需求，应用分割、独立运行、分别部署，iframe方案已经满足并且不断优化已经满足需求，但是作
转载
2024-05-13 22:07:15
671阅读
作者 | Jonathan Saring 微前端将前端整体分解为许多更小、更易管理的片段。每个团队可以端到端地拥有自己的功能，可以在自己的代码库中工作，可以独立发布版本，可以不断进行小的增量升级，还可以通过 API 与其他团队集成，以便他们可以一起组建和管理页面和应用程序。本文中，作者收集了 11 个最杰出的微前端构建工具，并提供了进一步学习的链接和视频。 将单体后端分解成为微服务之后，后端开
最近看了几个微前端框架的源码（single-spa、qiankun、micro-app），感觉收获良多。所以打算造一个迷你版的轮子，来加深自己对所学知识的了解。这个轮子将分为五个版本，逐步的实现一个最小可用的微前端框架：支持不同框架的子应用（v1 分支）支持子应用 HTML 入口（v2 分支）支持沙箱功能，子应用 window 作用域隔离、元素隔离（v3 分支）支持子应用样式隔离（v4 分支）支持
文章目录前言：为什么选择qiankun一、乾坤实现原理二、使用步骤1.主程序2.微应用(1). 配置webpack打包输出(2). 抛出生命周期(3). 引入publicPath配置api1 主应用api2 微应用api3 数据交互4 异常捕获 前言：为什么选择qiankun为什么要使用乾坤？与传统的iframe相比优势如何与传统的html条状相比优势如何如何体现乾坤的优势提示：以下是本篇文章正
转载
2024-06-19 10:48:11
440阅读
Vue-genesis（一）介绍官网地址: https://fmfe.github.io/genesis-docs/genesis是一个轻量级的Vue SSR插件,不与任何框架进行绑定,但目前来说是基于vue框架,也不与任何一个node服务器进行绑定,但一般来说,node服务器优先选择express。概括性的说,它起到一个服务端聚合,客户端一键拆分打包的功效。什么是服务端聚合,即将所有子工程聚合到
1. 乾坤简介 qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统 2.使用背景： vue2.0 , vue-cli 5.0主应用：安装乾坤$ yarn add qiankun # 或者 npm i qiankun -Smain.js设置注册子应用import { registerMicroApps, start } fro
转载
2024-07-23 11:40:04
319阅读
1、微前端概论
1.微前端概念
类型<iframe></iframe>一样，只不过微前端是用fetch去请求js并渲染在指定的DOM容器。· 跟技术栈无关，任何前端技术栈都可以接入。· 多个应用结合在一起，可以一起运行，又可以单独运行。· 一个复杂庞大的项目拆成多个微应用，单独开发、单独部署、单独测试，互不影响。· 原理是通
转载
2024-03-08 21:06:34
338阅读
目录 一、微前端概述 1. 基本原理 2. 微前端的主要优势 3. 当前微前端方案的一些缺点
转载
2024-05-20 21:26:51
551阅读
前言今天刚刚学习了一个微前端框架——乾坤，正着热乎劲，写一篇入门博客。这篇文章不会讨论太多的原理和实现，只是一个入门写 Hello World 的教程。文章的很多地方都参考官网，但是官网的教程太简洁了，个人觉得还是做不到无脑上手，希望这篇文章可以帮到正在入门微前端的伙伴。想直接看代码的，我写了个比官网更简单的例子，点击即可学会。什么是微前端首先，来了解一下微前端是个啥。当我们写了一个又一个的 SP
转载
2024-04-02 15:07:19
105阅读
一、安装Nginx：1 : wget下载:mkdir -p /usr/local/software/
cd /usr/local/software/
wget http://nginx.org/download/nginx-1.6.2.tar.gz2 : 解压文件, 进行安装：tar -zxvf /usr/local/software/nginx-1.6.2.tar.gz -C ../3 : 下载
转载
2024-10-26 20:20:28
20阅读
Nginx是一款高性能的Web服务器和反向代理服务器，通常用来进行负载均衡，提供高可用的服务。而Keepalived是一款开源的高可用性解决方案，可以提高系统的可靠性和稳定性。
使用Nginx和Keepalived来配置高可用服务的具体步骤如下：
1. 安装Nginx和Keepalived
首先需要在所有的服务器上安装Nginx和Keepalived，具体安装方式可以参考相关的官方文档。
微前端已经是一个非常成熟的领域了，但开发者不管采用哪个现有方案，在适配成本、样式隔离、运行性能、页面白屏、子应用通信、子应用保活、多应用激活、vite 框架支持、应用共享等用户核心诉求都或存在问题，或无法提供支持。本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。为什么还要造微前端框架目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，下面分别分析这
环境搭建1、安装node.js:可以从官网下载各种系统下的安装包，地址：http://nodejs.cn/download/1）如果你是window系统，那简单了，直接下载.msi安装文件安装即可愉快的使用2）如果你是linux系统，那安装方式就很多了，具体可以参考：https://nodejs.org/en/download/package-manager/查看是否安装成功： $node -v
目录简介优点安装目录结构nginx.conf配置文件结构server虚拟主机配置listenserver_namelocationrootindextry_filesproxy_pass使用反向代理配置语法常用指令proxy_passproxy_set_headerproxy_redirect负载均衡负载均衡策略轮询（默认策略）加权轮询iphash动静分离服务器限流正常限制访问频率突发限制访问频率
转载
2024-08-30 16:22:15
137阅读
目录基本配置设置用户工作衍生进程数错误日志存放路径pid文件存放路径设置最大连接数http->servergzip字符编码nginx的基本格式实战配置虚拟主机配置开始配置虚拟主机的ngix配置查看日志是否有内容基本配置设置用户设置用户，可以指明哪个用户可以使用nginx，nobody是低权限用户，提高用户的安全性。有“#”代表不需要设置用户。user nobody;工作衍生进程数工作衍生进
前言 一个完整的产品往往都是从一个个小的功能模块进行开发，然后经过一系列的迭代更新。功能模块越来越多，所需要的依赖包也会越来越多，这时候的产品就会越来越庞大。这里的庞大指的是构建效率低下、dev-server 占用内存大甚至内存泄露、维护成本急剧增加。
如果要升级或者更换系统的开发框架的话需要投入大量的工作量。并且有些系统的功能并不是一直在迭代开发，而是在某个版本之后就不会持
转载
2024-05-13 21:56:44
30阅读
什么是微前端通俗易懂的来说，微前端是可以将一个大应用的不同部分进行独立的部署，各个部分之间相互独立，独立部署
原创
2022-03-21 10:15:55
1083阅读
前言最近开发的项目中有使用到微前端，微前端在我这分为两大类，iframe、single-spa系列，在这篇文章我会记录下微应用的 single-spa、乾坤的使用和一些理解，我们公司内部的friday没有开源，在这里就不记录了。single-spasingle-spa使用新建father、child两个vue项目father(父应用)1. 安装single-spa基座npm install sin
