微前端qiankun的部署

embedded/2025/1/23 14:13:30/

前端qiankun的部署

  • 本地开发
    • 主应用配置启动端口
    • 子应用配置启动端口
  • 测试环境部署:
    • 场景 1:主应用和微应用部署到同一个服务器(同一个 IP 和端口)
      • 微应用都放在在一个特殊名称(不会和微应用重名)的文件夹下
      • 主应用配置
      • 子应用配置
    • 配置nginx

本地开发

主应用配置启动端口

打开主应用项目
src/micro/app.js文件中查看子应用的端口号

/*** name: 微应用名称 - 具有唯一性* entry: 微应用入口 - 通过该地址加载微应用,本地与服服务器配置有区别* container: 微应用挂载节点 - 微应用加载完成后将挂载在该节点上* activeRule: 微应用触发的路由规则 - 触发路由规则后将加载该微应用*/{name: 'netmoni_child1',entry:origin + (ENV === 'development' ? ':31325' : '/child/netmoni_child1/'),container: '#child1_frame',activeRule: '/sub/child1',props: { ...msg } // 下发子应用的信息}

例如此端口号为31325

子应用配置启动端口

打开子应用项目
src/settings.js配置子应用启动端口:

module.exports = {//...其他配置/*** @type {String} ''* @description sub project port*/port: 31325
}

此端口需与主应用对应一致
分别启动运行主应用与子应用即可

测试环境部署:

场景 1:主应用和微应用部署到同一个服务器(同一个 IP 和端口)


http://www.ppmy.cn/embedded/156318.html

相关文章

1.22双指针刷题

acwing799最长连续不重复子序列问题 acwing800数组元素的目标和 acwing2816判断子序列 洛谷AT_abc352_b Typing CF1968B Prefiquence交不了 #include<iostream> #include<cstring> using namespace std; int n,a,b; string s,t; int k;int main(){cin>…

招商蛇口:于高新 CID,启幕品质人居新篇

在房地产行业的风云变幻中&#xff0c;招商蛇口始终以卓越之姿领航前行。在第二十一届&#xff08;2024&#xff09;蓝筹年会上&#xff0c;招商蛇口凭借财务稳健、产品与运营等多方面的出色表现&#xff0c;成功入选 “可持续蓝筹价值企业”。在 2024 第十届产业园区大会上&am…

在MyBatis的XML映射文件中,<trim>元素所有场景下的完整使用示例

在MyBatis的XML映射文件中&#xff0c;<trim>元素用于动态地添加SQL语句的一部分&#xff0c;例如SET或WHERE子句&#xff0c;并可以处理前缀、后缀以及多余的逗号或AND等连接符。下面是一些<trim>元素在不同场景下的完整使用示例&#xff1a; 示例1: 使用<trim…

数据链路层协议

数据链路层协议 1、MA网络&#xff1a; 以太网协议 定义&#xff1a;以太网不是一个网络&#xff0c;而是一个协议&#xff0c;传输标准EthernetII 类型帧的网络 特征&#xff1a;多路访问&#xff0c;广播式的网络&#xff0c;需要使用MAC地址对设备进行区分和标识 构建方法…

线程池的数据结构是什么 为什么会占用堆内存 线程池是一个对象吗

线程池是一种用于管理和复用线程以执行多个任务的设计模式&#xff0c;它通过预先创建一组线程&#xff0c;并将这些线程重复用于执行提交给线程池的任务&#xff0c;从而减少因频繁创建和销毁线程带来的开销。在Java中&#xff0c;线程池通常通过java.util.concurrent包下的Th…

Pandas 数据分析(二)【股票数据】

股票数据分析 写在前面题目背景021 加载股票数据到CSV文件022 查看基本信息和数据统计023 更改索引列为普通数据列024 给数据添加月份和年份025 计算每年的平均收盘价026 找到收盘价最低的数据行027 筛选出部分数据列028 设置日期列为索引列029 删除不需要的数据列030 对数据列…

CSS 默认值

HTML 元素的 CSS 默认值 下表显示了所有 HTML 元素的默认 CSS 浏览器值。 元素默认的 CSS 值a:link color: (internal value);text-decoration: underline;cursor: auto; a:visited color: (internal value);text-decoration: underline;cursor: auto; a:link:activecolor: (…

【机器学习实战中阶】比特币价格预测

比特币价格预测项目介绍 比特币价格预测项目是一个非常有实用价值的机器学习项目。随着区块链技术的快速发展&#xff0c;越来越多的数字货币如雨后春笋般涌现&#xff0c;尤其是比特币作为最早的加密货币&#xff0c;其价格波动备受全球投资者和研究者的关注。本项目的目标是…