部署微前端项目在同一服务器的同一个端口下

微前端是一种架构模式,它将前端应用程序拆分为多个独立的、可独立开发和部署的微服务。每个微前端应用都可以独立运行,并且可以组合在一起形成一个完整的前端应用程序。在本文中,我们将探讨如何将微前端项目部署在同一台服务器的同一个端口下。

1. 创建微前端项目

首先,我们需要创建微前端项目的基本结构。可以使用任何喜欢的前端框架(如React、Angular或Vue.js)创建每个微前端应用。在这里,我们将以React为例。

创建一个名为"app-shell"的主应用程序,它将作为微前端应用的容器。同时,创建其他微前端应用,例如"app1"和"app2"。

app-shell
├── src
│   └── App.js
├── package.json
└── ...
app1
├── src
│   └── App.js
├── package.json
└── ...
app2
├── src
│   └── App.js
├── package.json
└── ...

2. 配置主应用程序

在主应用程序中,我们需要配置路由和加载其他微前端应用程序。

首先,安装所需的依赖项。

cd app-shell
npm install rea
使用各种姿势舒服的部署微前端项目 微前端作为解决巨石应用和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力。 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间,期间也产出了两篇入门文章:qiankun微前端实战看这篇就够了 - Vue项目篇 和 vue3.0&qiankun2.0极速尝鲜,微前端进阶实战!,有兴趣或者刚接触微前端的同学可以去看下。 经过拆分之后,一个巨石应用变成了几个甚至几十个子应用,那么这么多应该该如何友好又舒服的部署呢,下面就来详细 阅读详情

相关推荐

微前端qiankun的部署

如果服务器数量有限,或不能跨域等原因需要把主应用和微应用部署到一起。通常的做法是主应用部署在一级目录,微应用部署在二级目录child下。src/micro/app.js文件中查看子应用的端口号。例如此端口号为31325。

Vanilla1119的博客 743

使用各种姿势舒服的部署微前端项目(上:打包与上传)

微前端作为解决巨石应用模块化和降低技术框架变动风险的神器,我觉得是当下前端发展的一大方向,可以在未来5-10年内保持生命力。 作者从2019年12月第一次使用qiankun框架落地微服务以来已经过去了一年多的时间,形成了、脚手架、工程结构设计、日常开发维护、性能优化、部署等一整套流程。 之前有两篇文章讲了qiankun的入门文章: qiankun微前端实战看这篇就够了 - Vue项目篇:这篇文章编写的较早,大致在19年12月份当时qiankun还在1.x版本,现在关于微应用注册及应用间通信的部分已经和现版本

qq_15390381的博客 1698

VUE qiankun微前端框架集中式部署

VUE qiankun微前端框架集中式部署

donkeyboy001的博客 1023

Nginx实战:同一域名端口下如何优雅部署多个Vue项目(附完整配置代码)

本文详细讲解了如何利用Nginx在同一域名和端口下优雅部署多个独立的Vue项目。通过配置Vue项目的publicPath和路由base,并结合Nginx的alias指令与try_files策略,解决了静态资源路径错乱、页面刷新404等核心问题,提供了完整的配置代码与部署实践指南。

weixin_29018335的博客 250

Zoom AI 技术架构研究:联合式方法与多模态集成

通过 Zoom AI 开放平台,企业可以自定义 AI 模块 (如法律合规审查、客户反馈分析),扩展应用场景。这种开放平台策略使企业能够根据自身需求定制 AI 功能,满足特定业务需求。

shao.bing的专栏 1317

分子动力学模拟学习1-采用AmberTools21的MCPB.py构建金属蛋白的top文件

分子动力学模拟学习1-采用AmberTools21的MCPB.py构建金属蛋白的top文件

weixin_45011386的博客 3823

ArcGIS+PLUS+InVEST三件套:从零搞定生态系统服务模拟预测(附完整数据包)

本文详细介绍了如何整合ArcGIS、PLUS模型和InVEST模型,构建一套完整的生态系统服务模拟预测工作流。内容涵盖从统一数据预处理、PLUS模型多情景模拟,到InVEST模型量化评估的全过程,并提供了关键脚本和避坑指南,旨在帮助研究者和从业者高效解决土地利用变化与生态系统服务评估结合的实际难题。

weixin_42522857的博客 139

001-基础入门-Web演示源码&资源&工具箱等

小迪安全2023笔记

wushangyu32335的博客 4260

我的世界进阶模组开发教程——制作机械动力附属模组

摘要: Create是Minecraft的机械动力模组,其代码结构分为多个关键模块: 数据生成系统:通过CreateRecipeProvider基类实现配方自动化生成,支持多步骤序列化装配配方(SequencedAssemblyRecipeGen),采用建造者模式链式调用; 注册管理:CreateRegistrate扩展了Registrate库,统一管理方块、流体、实体等注册,集成标签页分类和工具提示定制; 伤害系统:DamageTypeTagGen为机械伤害(如钻头、风扇火焰)定义原版兼容的标签; 客户端

qq_24992377的博客 2083

基于FPGA的FIR数字滤波器设计

clear;close all fc=1/4;fs=5/16; %输入给定指标 Rp=3;As=60;Fs=2; f=[fc,fs];m=[1,0]; %计算remezord函数所需参数f,m,dev dev=[(10^(Rp/20)-1)/(10^(Rp/20)+1),10^(-As/20)]; [N,fo,mo,W]=remezord(f,m,dev,Fs); %确定remez函数所需参数 hn=remez(N,fo,mo,W);...

FPGA/MATLAB学习教程/源码/项目合作开发 9454

对偶分解算法详解及其Python实现

对偶分解算法是一种广泛应用于求解凸优化问题的有效方法,尤其在大规模数据处理和分布式计算中展现出强大的实用性。在许多实际应用中,直接求解原始问题可能由于计算复杂度过高、资源受限或问题规模过大而变得不可行。这时,对偶分解方法为我们提供了一种高效的替代方案。对偶分解算法的核心思想是将复杂的原问题转化为其对应的拉格朗日对偶问题。通过引入拉格朗日乘子并构造对偶函数,该方法在一定程度上简化了问题的求解过程。特别是,对于包含多个约束条件的大规模优化问题,对偶分解可以将原问题分解为若干个小规模、相互独立的子问题。

闲人编程的博客 1751

科研牛马千万不要错过!手把手教你用AI精准匹配真实参考文献,仅需一个专业应用+两个提示词指令

当然也可以借助生成式AI,如GPT-5.2、Gemini 3 Pro粘贴段落,输入设计好的提示词,让模型根据段落内容匹配参考文献,并正确引用到段落合适位置,再按规范格式输出参考文献列表。阅读我提供的【正文文本】,为其中的关键论点寻找真实的、权威的参考文献(优先来源于Nature, Science, IEEE, ACM, PubMed等),并插入引用。若在段落中已经引用好了参考文献,也有参考文献列表,担心引用位置不当或论点、论述逻辑与文献不够契合,则可以用以下结构化提示词,让AI辅助审查。

智能AI让学术科研更容易 1031

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

霍尼韦尔SoftMaster使用说明

霍尼韦尔SoftMaster使用说明

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

上一篇: 使用Promise进行异步操作的方法
下一篇: 「打造风光摄影助手:龟斯小程序的设计与开发思路解析」
普通网友
博客等级 码龄3年 48粉丝 0原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值