微前端——组合式应用路由分发

最新推荐文章于 2025-07-23 17:49:37 发布
原创 最新推荐文章于 2025-07-23 17:49:37 发布 · 1k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #npm #vue.js #前端框架

本文详细阐述了如何通过npm包形式发布和管理子模块应用，包括路由配置、样式隔离、子模块发布流程以及基座集成。重点介绍了遵循的开发规范和避免样式冲突的方法。

组合式应用路由分发：是实现微前端的一种方式，我们以npm包的形式发布组件，然后在基座按需引入。各个npm包可以由不同的团队分开开发，但是开发时也要遵循一定的规范。

一、子模块应用

  1. router.js中导出路由，各个模块之间路由名称不能重复
    在这里插入图片描述

  2. src/index.js中导出路由
    在这里插入图片描述

  3. package.js中配置入口文件
    在这里插入图片描述

  4. package.js的其他配置
    name的名字不能有大写字母，每次发包的version版本不能重复。

  5. vue.config.js中各个模块的别名不能重复
    在这里插入图片描述

二、将子模块发布到npm

  1. 在npm官网注册自己的账户
  2. 设置npm代理
    可以先检查自己的代理 npm config get registry
最低0.47元/天 解锁文章
常见的微前端解决方案对比
lyn1772671980的博客
01-03 1921
常见的微前端方案对比
Golang net_http 与微前端架构的集成应用
Golang编程笔记的博客
07-04 868
本文旨在为开发者提供一套完整的Golang net/http与微前端架构集成的解决方案。我们将覆盖从基础概念到实际实现的全部过程，包括路由设计、静态资源服务、API接口构建以及微前端加载机制等核心内容。介绍微前端核心概念及其优势讲解Golang net/http包的关键特性展示集成架构设计与实现提供完整代码示例和实际应用案例探讨未来发展趋势和挑战微前端：将前端应用分解为多个独立开发、部署和运行的较小应用的架构风格net/http：Golang标准库中用于构建HTTP客户端和服务器的包。
实施微前端的六种方式（上）：三种借助路由微服务化前端应用
weixin_33896726的博客
07-08 809
为什么80%的码农都做不了架构师？>>> ...
路由分发功能应用
weixin_33860737的博客
03-20 191
EIGRP 路由分发的应用 背景： 公司与分公司有个联网项目，参考两端核心交换的配置，方案准备使用EIGRP动态路由实现HA 和 load banlance 。 问题： 由于两端的VLAN 信息有冲突，一直忙于如何的协调处理VLAN的问题。 对端分公司全部使用的静态路由，配了个EIGRP 放在那只是个摆设，没有实际的应用。（鄙视ing , 不过也佩服那群棒...
微前端架构 之 路由管理（二）
qq_35876316的博客
05-16 479
它负责处理多个子应用（也称为微前端）之间的页面跳转和导航。在微前端架构中，由于存在多个独立的子应用，因此需要一个全局的路由管理器来协调这些子应用的路由。
前端单页应用微服务化解决方案5 - 路由分发
weixin_33829657的博客
09-18 886
文章转发自 alili.tech 路由分发式微前端 从应用分发路由到路由分发应用 用这句话来解释,微前端的路由,再合适不过来. 路由分发式微前端，即通过路由将不同的业务分发到不同的、独立前端应用上。其通常可以通过 HTTP 服务器的反向代理来实现，又或者是应用框架自带的路由来解决。 就当前而言，通过路由分发式的微前端架构应该是采用最多、最易采用的 “微前端” 方案。但是这种方式看上去更像是多...
微前端解决方案初探 06 基于模块联邦的微前实现方案（路由配置、同步路由）
皮蛋很白的博客
02-15 1361
微前端应用路由配置概述 在微前端应用中有两种类型的路由： 容器应用路由：用于匹配微应用 微应用路由：用于匹配组件 容器应用使用 BrowserHistory 路由，微应用使用 MemoryHistory 路由，因为： 为防止容器应用和微应用同时操作 url 而产生冲突，在微前端架构中，只允许容器应用更新 url，微应用不允许更新 url。MemoryHistory 是基于内存的路由，不会改变浏览器地址栏中的 url，也不会把历史记录同步给浏览器。 如果不同的应用程序需要传达有关路由的相关信息，应尽可能
微前端学习笔记（1）：微前端总体架构概述，从微服务发微
周陆军的博客，分享it技术。
06-06 1549
从最初的CS架构，如MFC Java Swing 等，到BS架构，JSP PHP，再到前端后端分离，前端从jquery GWT-Ext 到 Handlebars ，再到angularJS/Vue/React，反观java 世界，学好 Spring MyBatis ,一路无忧，哎……
浅谈微前端
最新发布
林见鹿鸣
07-23 500
子应用的样式通过 Shadow DOM 实现隔离（样式仅作用于自定义元素内部），容器与子应用的通信通过自定义事件（CustomEvent）机制完成（容器监听子应用派发的事件，或子应用监听容器触发的事件）。将应用拆分为比子应用更细粒度的功能模块（如 “用户登录”“数据报表”），通过模块注册中心管理所有模块的元信息（如名称、版本、资源地址、依赖关系）。这类实现方式已形成成熟的框架生态，以下是基于路由分发的主流框架，它们均遵循路由驱动子应用加载的核心逻辑，同时在隔离机制、接入成本等方面各有侧重：​。
2022年 微前端技术调研- 图文并茂
React_Community的博客
03-10 2126
一.动机在 我们 的前端开发工作中，我们往往就会遇到如下困境：工程越来越大，打包越来越慢团队人员多，产品功能复杂，代码冲突频繁、影响面大内心想做 SaaS 产品，但要求总是要做定制化不同的...
探索微前端架构：多种实现方式与实践思考
qq_42257169的博客
06-04 1124
微前端架构的核心思想，就是把 Web 应用从单一的单体应用转变成多个小型前端应用聚合而成的形态。这些小型前端应用具备独立运行、独立开发以及独立部署的能力，而且还能共享组件，实现并行开发。这里所说的前端应用是基于前后端分离的单应用页面，这是谈论微前端的基础前提。more。
【前端微服务】实现方式都有哪些 总结
wys997的博客
07-03 873
实现前端微服务的方式多种多样。
前端路由的不同方法实现
summer7310的专栏
12-08 7667
在讲前端路由之前，先说下后端路由，以及为什么出现了前端路由。 后端路由： 浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的jsp就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controll
[前端架构]微前端原理了解
SCUhzs
07-04 921
[前端架构]微前端原理了解
Vue Router - 前端路由实现思路（三种模式：hash、history、memory）
前端知识库
05-18 3774
1.路由是什么 搞清楚这几个概念： 路由 分发 路由表 默认路由 如果没有#n，就给一个默认值 number = number || 1; 404 路由 / 保底路由 如果用户输入了错误路径，就给一个404页面，保证用户总是能够看到一个页面 嵌套路由 1.1 路由器 如果家里有1个即以上的人要上网，就需要一个路由器 上网路由 1.用户上网连接路由器，路由器看你想连哪里，就会把信号包发给相应的地方（百度、抖音、腾讯等） 2.分发：分别发送到各个地方 3.路由就是分发请求，路由器就是分发请求的东西 4.路
实现微前端有哪些方案
weixin_40918145的博客
12-18 639
原文地址：https://www.imooc.com/article/304768 单纯根据对概念的理解，很容易想到实现微前端的重要思想就是将应用进行拆解和整合，通常是一个父应用加上一些子应用，那么使用类似Nginx配置不同应用的转发，或是采用iframe来将多个应用整合到一起等等这些其实都属于微前端的实现方案，他们之间的对比如下图： 方案 描述 优点 缺点 Nginx路由转发 通过Nginx配置反向代理来实现不同路径映射到不同应用，例如www.abc.com/app1对应a
微前端的概念及常见的几种实现方式
friend_ship的博客
09-23 2335
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端。微前端的实现意味着对前端应用的拆分，拆分应用的目的并不只是为了架构上好看，各个前端应用可以独立开发、独立部署，可以提升开发效率。同时，也可以进行并行开发——这些组件可以通过NPM、GitTagGit或者Submodule来管理
微前端中的路由加载流程
前端小白的博客
09-23 495
子应用通常会提供一些生命周期方法，如 bootstrap、mount、unmount 等，用于管理子应用的加载、渲染和卸载过程。子应用之间或子应用与基座应用之间可能需要进行通信。：基座应用是微前端架构中的主应用，负责管理和协调各个子应用的加载和卸载。当用户导航到不同的路由时，基座应用会卸载当前子应用，并加载新的子应用。：基座应用在启动时会初始化路由配置，注册各个子应用的路由。子应用加载完成后，基座应用会将子应用渲染到指定的容器中。基座应用根据匹配的路由动态加载对应的子应用。
浅谈前端性能优化（六）——CDN内容分发网络
筱葭的博客
05-07 3166
有关CDN的介绍请见：http://blog.csdn.net/zhouziyu2011/article/details/60962103   1、CDN CDN是一组分布在多个不同地理位置的Web服务器，用于更加有效地向用户发布内容，在优化性能时，会根据距离的远近来选择。 CDN将网站的资源发布到离用户最近的网络边缘，用户可以就近取得资源内容。 CDN通常部署静态内容：JavaScri
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值