微前端框架micro-app实践

已于 2022-08-31 14:17:58 修改
阅读量608 收藏 2
点赞数 1
文章标签： 前端 vue.js javascript 前端框架
于 2022-08-31 13:09:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25166649/article/details/126620862
版权

随着项目规模扩大，项目越来越臃肿；早期项目依赖iframe来解决：

  1. iframe的缺点我就不在这描述的，大家都懂；
  2. 通过nginx配置将不同项目正好在一个域名下；
  3. 微前端框架乾坤等等；

 无意中发现 micro-app微前端框架；相比qinkun； micro-app子模块改动几乎没有，话不多说：

根据官方文档安装好；及配置

主项目路由配置

子路由配置

 base 配置很重要；用历史模式在刷新的时候才会没有问题。

nginx配置

 这样配置只需要配置一次

打包后结构

 大功告成，像搭积木一样开发大型项目

zht_web
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
microApp vue3+vite+ts 子应用接入改造
uncle_Huang的博客
07-01 242
microApp vue3+vite+ts 自应用接入改造
micro-app-vue2 vue3 超详细快速入门指南 学习记录
Tx457973的博客
03-31 3510
micro-app-vue 快速入门指南 简介 micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。 micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。 快速开始 1. 基座应用 //初始化一个vue应用 vuec.
基于京东micro-app微前端框架的项目实践
08-11 3389
微前端借鉴了微服务架构思想，既可以将多个项目融合为一，又可以减少项目之间的耦合，提升项目扩展性，相比一整块的前端仓库，微前端架构下的前端仓库倾向于更小更灵活。我们对iframe、single-spa、qiankun、micro-app等相关技术进行了对比研究，最终选型了micro-app作为我们的技术方案。...
神秘的微前端（本文所介绍的是关于micro-app在项目中的实际应用）
qq_43608549的博客
06-16 2017
MicroApp借鉴了WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性，micro-app不需要像single-spa一样要求子应用修改渲染逻辑并暴露出方法，也不需要修改webpack配置，其次就是接入成本低、兼容性高、性能强是我们选择MicroApp作为微前端框架使用的重要因素。
【微前端】micro-app搭建项目实战
最新发布
weixin_50636536的博客
12-27 923
url必须指向子应用的index.html，如：http://localhost:3000/ 或 http://localhost:3000/index.html。修改 package.json、package-lock.json 两个文件中的name名称，让其与主应用注册组件name名称一致，不一致时子应用注入不到主应用中。更多配置请参考官方：https://micro-zoe.github.io/micro-app/每个name都对应一个应用，当多个应用同时渲染时，name不可以重复。
微前端 - micro-app
lhz_333的博客
08-15 3222
之前已经实践过阿里微前端框架 qiankun，现在来使用一下京东推出的微前端解决方案 - MicroApp。
qubix:使用create-react-app创建微前端
04-30
标题中的“qubix”是一个基于Create-react-app的工具，用于构建微...在实际使用中，开发者需要了解如何配置和调用qubix提供的功能，以及如何与其他微前端框架（如single-spa、qiankun等）配合使用，以达到最佳效果。
Micro App框架Demo
04-03
【Micro App框架Demo】是一种基于前端技术实现的微应用架构示例，旨在帮助开发者理解和实践在大型项目中如何拆分和管理多个独立的应用模块。这种框架设计思路是将一个复杂的应用拆分成多个小型、可独立部署的子应用...
micro-app:DemoApp（Mongo，Spring，Angular）
05-19
"micro-app:DemoApp（Mongo，Spring，Angular）"是一个基于JavaScript技术栈的微应用示例，它结合了MongoDB数据库、Spring框架和AngularJS前端框架。这个项目可能旨在展示如何将这三种技术有效地整合在一起，创建一...
京东开源微前端架构框架
04-13
为了解决这些问题，京东开源了一款微前端架构框架，名为“微应用”（micro-app）。本文将深入探讨这一框架的核心概念、设计思想以及其在实际项目中的应用。 微前端架构是一种新型的前端架构模式，它的核心思想是将...
micro-app-home-alarm:Node.js基本家庭警报控制器
05-13
MQTT / Node基本家庭报警系统这是项目移植到微型应用程序框架的端口，因此您可以通过和项目在台式机和移动设备上获得本机外观。 该项目提供了使用Node和MQTT的基于家庭的警报系统。 它提供了一个GUI，可让您执行以下...
qiankun-micro-app:qiankun 微前端应用实践与部署
05-14
qiankun 微前端应用实践与部署 微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。 代码仓库 分别进入 portal、app1、app2 根目录，执行: 开发模式 # portal yarn yarn start # app1、app2 npm install npm run dev 生产模式 # portal yarn build # app1、app2 npm run build 主应用 主应用 js 文件引入 qiankun 注册子应用，并编写导航页显示跳转逻辑。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>QianKun Example</title> </head> <body> <div cla
microAppMain:antd pro of vue + qiankun搭建的主应用
05-29
microAppMain antd pro of vue + qiankun，子应用请参考 账号：admin/admin 安装依赖 npm install 开发模式运行 npm run serve 编译项目 npm run build Lints and fixes files npm run lint
MicroApp初探
CrystalLee
02-14 799
MicroApp 的使用初探
记录一下微前端MicroApp项目的搭建,用的是vue-element-admin + MicroApp
JavaScript66的博客
08-09 954
记录一下第一个微前端项目的搭建MicroApp,不得不说MicroApp是真的好用
微前端解决方案micro-app
qq_18283943的博客
10-27 915
1、京东出品的micro-app (推荐+++) https://cangdu.org/micro-app/docs.html#/ 2、single-spa（推荐++）和qiankun（推荐+） https://www.jianshu.com/p/54904acb5896 主要介绍了single-spa。是在qiankun发展起来的。需要改单页的打包方式。 ———————————————— 版权声明：本文为CSDN博主「一键写代码」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本
微前端MicroApp的学习（一）：简单搭建项目
weixin_41897680的博客
04-10 8315
微前端MicroApp的学习（一）：简单搭建项目
MicroApp搭建样例(一)
Keith_Lee的博客
06-22 766
简单上手MicroApp微服务框架
micro-app-demo 微前端
06-06
micro-app-demo（微前端）是一种前端架构模式，旨在将一个大型的Web应用程序分解为多个小型应用程序，每个应用程序可以独立开发、测试、部署和运行。每个小型应用程序被称为微应用程序，它们可以通过Web组件、Web框架或自定义解决方案实现，并可以独立部署和更新。 通过微前端，可以提高Web应用程序的可维护性、可扩展性和性能，并且可以大大减少开发人员之间的协作成本。微前端也有利于在掌握一些基本技能后，将一个大型团队分解成若干个小型团队，分别负责不同的微应用程序的开发和维护。 微前端还有助于减轻前端应用程序对特定框架或库的依赖，增强了应用程序的灵活性和可重用性。此外，在多个微应用程序之间通信和协调非常重要，因为它们需要协调共享状态、事件和路由等方面。 总之，微前端是一种独立应用程序开发、测试、部署和运行的前端架构模式，旨在提高Web应用程序的可维护性、可扩展性和性能。用微前端可以轻松切分一个大型的Web应用为多个独立的微应用，规模越大分的越细。微前端还可以减轻前端应用程序对特定框架或库的依赖，增强了应用程序的灵活性和可重用性。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值