微前端乾坤 主应用和微应用在同一个服务器上

最新推荐文章于 2024-05-13 11:58:43 发布
最新推荐文章于 2024-05-13 11:58:43 发布
阅读量1.9k 收藏 9
点赞数 1
分类专栏： 微前端 乾坤 微服务 文章标签： 微服务
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zxl_start/article/details/121660752
版权
微前端 同时被 3 个专栏收录
1 篇文章 0 订阅
订阅专栏
乾坤
1 篇文章 0 订阅
订阅专栏
微服务
1 篇文章 0 订阅
订阅专栏

一、主应用的main.js配置微应用的入口
activeRule和entry前缀不可以一模一样，否则打包之后刷新主应用框架会丢失
本地启动需要设置不同端口号，线上不用
在这里插入图片描述
二、主应用中的菜单写死
前缀要和activeRule一样
在这里插入图片描述
主应用和子应用路由设置base
主应用histroy模式
在这里插入图片描述
子应用hash模式
在这里插入图片描述
在这里插入图片描述

主应用打包配置
在这里插入图片描述

子应用打包配置
在这里插入图片描述

在这里插入图片描述
打包文件

在这里插入图片描述
在这里插入图片描述
ngix配置
在这里插入图片描述

淋雪小新
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微前端框架qiankun应用及部署
qq_28223305的博客
01-04 1806
微前端qiankun
qiankun配置微前端
zzq_828的博客
02-22 536
qiankun配置微前端，react为主应用，子应用为react和vue3
2024年前端最新10分钟弄懂微应用框架——乾坤，真香！(1)，2024年最新Web前端程序员面试必备的知识点
最新发布
2301_82244509的博客
05-13 836
基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
qiankun微前端部署（主/子应用部署在同一个服务）(2024.05.20更新~)
Alice_hhu的博客
01-26 1016
qiankun微前端部署（主/子应用部署在同一个服务）
qiankun 微前端应用实践与部署（二）
我爱盐酥鸡
09-14 433
下面是两种方案的简要描述。 传统部署 方式 通过配置 nginx 端口到目录的转发。 具体可查看上一篇文章 特点 需要对外开放子应用对应的端口，将编译好的应用文件放到对应的配置目录。 docker 部署 方式 首先构建主应用与子应用的 docker 镜像，通过 docker run 或者 docker-compose 的方式启动容器。 通过配置 nginx 转发规则，匹配访问路径子应用容器端口。 假设服务器 ip 是 192.168.2.192，主应用容器端口是 8889，子应用容器端口是 7100、710
qiankun前端微服务框架-同一服务器同一端口
R的博客
08-10 1656
基于vue3编码 部署在同一服务器同一端口需要注意的点 主应用 子应用 第一步:配置History 第二步：配置publicPath 第三步：统一library名称，需要与主应用中配置的name保持一致 Nginx nginx配置 目录结构 ...
umi-qiankun 微应用开发部署
飞奔的蜗牛
07-01 824
1、app.tsx中添加配置，子应用打包二级目录名称。1、在主应用中app.tsx添加配置。2、动态添加路由，并指定路由位置。
乾坤微前端基于vue的子模块开发.docx
08-19
在微前端领域，乾坤（Qiankun）是一个流行的框架，它允许开发者将多个独立的Vue应用集成到同一个页面中，形成一个大型的单页应用（SPA）。在基于Qiankun的微前端开发中，子应用的创建和通信是非常关键的环节。本文将...
微前端完整vue实例-乾坤【qiankun】
01-16
1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用，这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules，执行npm install即可。 更新...
保留vite es特性，快速接入乾坤微前端子应用.zip
02-08
【标题】"保留vite es特性，快速接入乾坤微前端子应用" 提示我们这个压缩包文件的内容主要涉及Vite构建工具与乾坤（Qiankun）微前端框架的集成，目的是在保持Vite的优秀特性的同时，实现企业级快应用的快速开发。...
wlui-qiankun:主要使用乾坤插件实现微前端框架的测试，以及使用rxjs进行各个应用中间的传值操作
05-05
乾坤插件提供了一套完整的生命周期管理和路由管理机制，使得多个子应用可以在同一个浏览器窗口内无缝协同工作。通过`wlui-qiankun`，我们可以快速地搭建起一个微前端的基础架构，为后续的应用开发提供便利。 首先，...
微服务---多模块打包---能打包能运行88.rar
02-25
微服务打包的例子用的spring2.3版本的工程创建的。能运行 花了几天时间才搞定的。网上很多的文档都不能成功。不是版本问题就是包问题 这个是用eclipse工具创建的springboot工程。
qiankunDemos:微服务框架方案
04-06
本项目用于探索微前端乾坤框架的使用 下载代码 git clone :wzy4072/qiankunDemos.git 仓库地址： 三个项目基于vue-cli创建的hello-word工程 日志：2021.3.31 16.40 根据乾坤官方文档 进行了基本配置 实现了预期效果。 配置概括如下 1 主应用 注册子应用 2 主应用 配置路由 设置挂载点 3 子应用 配置 output 4 子应用 配置钩子函数 任务 主应用登录 子应用使用token 需求 1微应用可以独立访问 2 MainApp main.js import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'vue app', entry: '//localhost:5001', container:
vite-plugin-qiankun:保留vite es特性，快速接入乾坤微前端子应用
08-04
1、在 vite.config.ts 中安装插件 // vite.config.ts import qiankun from 'vite-plugin-qiankun'; export default { // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致 plugins: [qiankun('...
qiankun乾坤主子应用间问题
ymyzyx的博客
10-10 1105
原理：element-ui theme-picker组件修改主题色是将所有组件之前的色值全部换成新的，生成一个style文件，追加到head中。所以在同步修改子应用主题色的时候，要将生成的style文件所有选择器前加上此前缀，同时将style追加到< qiankun-head >中。主应用刷新主题色恢复问题，app.vue引入theme-picker区间隐藏，刷新会默认执行修改组件颜色事件。问题：若主子应用间开启了样式隔离，会把子应用所有样式前增加前缀div[data-qiankun=“”]
微前端qiankun从搭建到部署的实践 (转载)
liubangbo的专栏
06-23 1531
文章转自：微前端qiankun从搭建到部署的实践 (转载)_丢丢的大神的博客-CSDN博客建议看原文。最近负责的新项目用到了，写篇文章分享下实战中遇到的一些问题和思考。示例代码： github.com/fengxianqi/…。在线demo：qiankun.fengxianqi.com/单独访问在线子应用：项目有个功能需求是需要内嵌公司内部的一个现有工具，该工具是独立部署的且是用写的，而我们的项目主要技术选型是，因此需要考虑嵌入页面的方案。主要有两条路：两种方案都能满足我们的需求且是可行的。不得不说，方案虽
如何将微前端项目部署在同一台服务器同一个端口下
京东科技开发者
04-11 442
本文旨在通过部署微前端项目的实践过程中沉淀出一套部署方案，现就一些重点步骤、碰到的问题做了一些总结。
基于 qiankun 的微前端最佳实践（图文并茂） - 应用部署篇
mingyuanyunlian的博客
09-24 4093
写在开头 微前端系列文章： 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇 基于 qiankun 的微前端最佳实践（图文并茂） - 应用部署篇 基于 qiankun 的微前端最佳实践（图文并茂） - 应用间通信篇 万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇 本系列其他文章计划一到两个月内完成，点个 关注 不迷路。 计划如下： 生命周期篇； IE 兼容篇； 性能优化、缓存方案篇； 引言 大家好~我们是明源云链前端团队，我们使用 q.
使用qiankun（乾坤）搭建 微服务
希文Gershwin
05-26 7053
微前端——qiankun（乾坤）实例 背景 一个WEB端管理系统包含好几个单独的模块，相互之间没有耦合，如果放到同一个项目里，同时好几个人去维护，不利于管理，单独子模块的上线会对整个项目全量上线风险比较大，并且容易代码冲突 一、什么是微前端 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！ 二、为什么使用微前端 技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权 独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成后主
乾坤 微前端和其他区别
05-23
与传统的单体应用不同，乾坤将一个大型应用程序划分为多个独立的子应用程序，每个子应用程序都可以单独开发、构建、部署和运行。这种架构风格可以使大型应用程序更容易维护和扩展，并且可以提高应用程序的性能和稳定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值