qiankun前端微服务框架-同一服务器同一端口

原创 已于 2023-02-13 18:18:06 修改 · 2k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#javascript #qiankun #vue
于 2021-08-10 15:38:21 首次发布

基于vue3编码
部署在同一服务器同一端口需要注意的点
官方文档：qiankun

主应用

entry
对应package.json里的name
main.js里的路由设置(history)
activeRule
index.html的id
main.js里的匹配值,代指匹配id
在这里插入图片描述

子应用

第一步:配置History在这里插入图片描述

第二步：配置publicPath

在这里插入图片描述

第三步：统一library名称，需要与主应用中配置的name保持一致

在这里插入图片描述

Nginx

nginx配置

在这里插入图片描述
在这里插入图片描述

目录结构

在这里插入图片描述

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:
qiankun 主子应用使用同一地址同一端口配置
couch potato的博客
04-10 1537
Unceugnt Error: application "xxxx' died in status LOADING_SOURCE_CODE: [qiankun]: You need to export lifecycle functions in xxxx entry
qiankun微前端部署（主/子应用部署在同一个服务）(2024.05.20更新~)
Alice_hhu的博客
01-26 2892
qiankun微前端部署（主/子应用部署在同一个服务）
乾坤微服务的使用
浩星
06-19 2143
在这里整理下用乾坤来开发微服务的一些资料。
qiankun(微服务)-vue搭建
weixin_45929334的博客
11-24 3617
乾坤微服务需要一个主应用搭配若干子应用。 1.搭建主应用 创建主应用vue项目后，使用$ yarn add qiankun # 或者 npm i qiankun -S 安装乾坤模块，在入口文件main.js中导入乾坤，使用registerMicroApps注册子应用，并开启乾坤微服务。 main.js: import Vue from 'vue'; import App from './App.vue'; import router from './router'; Vue.config.prod
qiankun前端微服务框架
R的博客
05-27 3425
目录一.须知二.主应用配置三.微应用配置如何创建Vue3项目 一.须知 官网: https://qiankun.umijs.org/zh/guide 主应用: 支持任意技术栈,无限制 微应用: 暂不支持vite2.x 版本,因为vite打包代码时，内部的esbuild会tree shake掉与qiankun相关的生命周期钩子 二.主应用配置 三.微应用配置 注册 vue.config.js const path = require("path"); const packageName = r
前端qiankun微服务单镜像部署方案
热门推荐
知无涯
08-28 1万+
目前状况 目前的部署方式是 5个前端应用都单独打一个docker镜像，单独部署，最后配置kong网关将5个应用连接起来。 痛点 由于每个前端都单独打包一个docker镜像，这种做法是非常消耗资源的，首先是5个应用是一个整体，部署时需要全部应用一起上线，5个应用打包5个镜像，每次打镜像都需要操作5次，而且容易出错。每个镜像都是基于nginx镜像来构建，存储每个镜像需要55M，5个应用就是 275M,这是压缩后存储在harbor的容量，真实在服务器中的大小是139M，非常消耗资源。部署时每启动一个应用都相当于启
微前端乾坤（qiankun）初尝试
gdutRex的博客
03-01 3567
介绍 qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 公司有一个门户网站需要嵌入其他系统，使用iframe会有很多的兼容性问题，如果使用qiankun框架，不仅可以绕过这些iframe的坑，还可以进行很多的“骚操作”。 快速上手 qiankun官网的快速上手很简单，不是因为他们懒得写，而是引入qiankun的确是非常简单。 只需要在主应用中引入qiankun,微服务做相应的配置，就可以，下面就介绍我在项目中如何引入。 主应用
微前端qiankun+docker+nginx配合gitlab-ci/cd的自动化部署的实现
qq_34237769的博客
07-15 1798
往期文章推荐 一篇文章教你搭建一个前后端分离（gitlab-cicd+docker+vue+django）的自动化部署的网站，干货满满！ Docker入门，这一篇就够了 技术栈简介 微前端 qiankun docker 不了解的建议先看一下我之前的介绍，一看就明白 gitlab-ci/cd 这里是自动化部署的知识，可以了解一下 nginx 建议配合视频解说更快理解 什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 微前端架构具备以下几个核心价值
qiankun微服务怎么用，怎么实现集成react和vue
珎珎啊
06-07 2593
Qiankun 是一个基于 Single-SPA 的微前端解决方案，它是由阿里巴巴前端团队开发的。Qiankun 提供了一套完整的微前端解决方案，包括了路由管理、状态管理等功能。通过使用 Qiankun，我们可以将多个前端应用组合成一个整体，每个应用可以独立开发、构建、部署和运行，从而提高了前端开发的效率。
前端微服务化（微前端）探索-蚂蚁金服乾坤框架初使用
qq_36006836的博客
02-07 961
踩点qiankun框架
vue3 搭建乾坤微服务
m0_59118465的博客
01-08 1889
vue3搭建乾坤微服务
一、乾坤框架（01） 介绍
shelter123456的博客
09-07 1321
乾坤框架
微服务之qiankun主项目+子项目搭建vue2
02-28 4567
默认情况下沙箱可以确保单实例场景子应用之间的样式隔离，但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun。会为每个微应用的容器包裹上一个 shadow dom 节点，从而确保微应用的样式不会对全局造成影响。
乾坤微服务（Qiankun）样式隔离深度解析
最新发布
liuyuanshuaia的博客
02-19 4083
乾坤通过Shadow DOM和动态作用域CSS双轨机制，为微前端应用提供了灵活的样式隔离方案。在实际项目中，开发者需根据浏览器兼容性、子应用技术栈及性能要求选择合适的策略。未来，随着Web Components技术的普及，Shadow DOM或成为微前端样式隔离的终极解决方案，但动态作用域仍将在过渡期扮演重要角色。最佳实践路线图默认启用。对高安全要求的子应用逐步迁移至Shadow DOM。结合CSS-in-JS方案（如styled-components）进一步规避冲突。
vue项目qiankun框架主应用和子应用用nginx部署,路由前缀，生产环境打包
Frank_colo的博客
07-21 3642
主应用的vite.prod.config.ts配置文件的base字段，这个字段和nginx部署的文件结构有关，base表示打包后的主应用文件放到服务器的哪个文件夹中，默认是base:"/" ,默认将主应用文件放在服务器的根目录中。在子应用的路由文件中，设置基础路由，这个基础路由要和主应用配置的activeRule一样，这样才能激活子应用。当子应用的基础路由是/homepage时，那么子应用的路由表的所有path字段的前缀就是/homepage。在main.ts中注册子应用时的配置对象。
qiankun微服务搭建
u013776700的博客
09-29 1811
乾坤微服务架构的基座应用搭建
微前端，从0开始搭建qiankun乾坤微服务
qq_40505914的博客
10-08 515
什么是微前端？为什么要用微前端？微前端：微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。与技术栈无关，团队独立开发，独立部署，微应用之间独立运行由于前端技术更迭，需要用新技术开发，旧代码不动，用微前端可以解决。如老项目用vue2开发，新项目功能用vue3，在同一个页面下，做到技术隔离。或者同一个页面既有Angular，也有Vue项目。
前段微服务qiankun
xusanyao的博客
11-10 805
基于Vue-cli3.0的qiankun（乾坤）前端微服务说明_白雾三语的博客-CSDN博客_乾坤微服务
前端微服务架构qiankun初体验
u013687509的博客
06-13 1207
一、背景 　　‘熵增’问题一直是所有软件开发中都会遇到的问题，不管是前端还是后端都会遇到，老的系统在需求不断变更或者迭代，代码量会越来越大，最终都会形成一座‘屎山’，今天主要讨论前端对于这种情况的解决方案。 　　目前前端的解决方案有比较古老的iframe，但是iframe是完全隔绝了应用，导致应用之间的通信也完全隔离，只能通过windows的postmessage等api进行通信，所以这种方式不...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

情系半生e

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值