// vue3 + qiankun 项目改造遇到的问题// 1. 获取当前路由，使用 useRoute 或者 useRouter 直接获取或者刷新页面拿到的是 / , 只有在 watch 和 watchEffect 中监听才能拿到当前路由// 2. 路由配置name不能相同, 相同会加载不出来 // vueRouter momery 模式 https://blog.csdn.net/q
webpakc5中asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。 qiankun子应用集成到主应用的时候，图片不显示，可以转base64
前言 官方入门教程 :https://qiankun.umijs.org/zh/cookbook 微应用路由模式选择：location.pathname--hash demo参考 常见问题 在主应用的某个路由页面加载微应用 注意事项 主应用和各个微应用之间挂载id（app）命名尽量保持不同，避免挂载被覆盖，同时也方便调试 微应用路由应该和主应
上线一个阿里 QianKun “微前端”逼走了 2 位 90后 爱前端不爱恋爱 113 人赞同了该文章 序言 作为一个团队领导者，需要经常帮助组员解决各类阻塞问题。 而我一直从事后端的开发，导致对前端的知识储备并没有那么丰富（实际很简陋）。 鉴于当下流行的开发模式几乎
微前端 1.qiankun https://qiankun.umijs.org/zh/guide 2.micro-app https://zeroing.jd.com/docs.html#/ 加密 1.https://www.jianshu.com/p/27e10f3202f0
如果接入的项目是使用vue3构建的，需要额外进行以下两项更改： 首先，在实例instance赋值时，务必确保是 createApp 函数的返回值赋值给instance，若后续有链式调用，先完成instance赋值操作后再进行链式调用。 正确的方法： instance = createApp(currentApp); instance.use(store) ...
2022年了，我还在研究qiankun，都被用烂了。看到招聘要求上一栏写着会qiankun,我默默的学起来。 这里主应用和子应用都是用vue-cli4X框架，期间遇到了一些坑也都解决了。 第一步安装qiankun yarn add qiankun # 或者 npm i qiankun -S main为主应用，sub-app1，sub-app2为微应用，如下图。
主应用代码 主应用工程里面源代码新建qiankun/index.js，通信代码如下： import { initGlobalState } from "qiankun"; import store from '@/store' // 主应用与微应用数据通信 const state = { subappClassName: '' // 设置子应用打包根的class类名 } const actions = initGlobal
入口文件增加乾坤生命周期钩子导入 /** * bootstrap 只会在微应用初始化的时候调用一次，下次微应用重新进入时会直接调用 mount 钩子，不会再重复触发 bootstrap。 * 通常我们可以在这里做一些全局变量的初始化，比如不会在 unmount 阶段被销毁的应用级别的缓存等。 */ export async
一、背景 在电商领域内，商品是一个重要组成部分，与其对应的商品管理系统，则负责商品的新建、编辑、复制等功能。随着商品管理系统的成熟稳定和业务上的扩展需求，催化出了商品中台的诞生。它可以将现有商品功能最大效率的复用在很多业务上（公司内业务、公司外业务等）。而不是仅限于当前团
项目背景：qiankun、vue2.0、vuecli3.0 问题：当想在子服务中添加 第三方的js库或者sdk时，在public/index.html内引入相应的js，再在相应的子服务的main.js中 window全局对象上 访问注入的js，这时候问题就出现了 在相应的子服务端口直接访问时，可以访问的到相应的 js对象，但是在通过主服务（
关注公众号： 微信搜索 前端工具人 ; 收货更多的干货 原文链接： 自己掘金文章： https://juejin.cn/post/7009214640030744589 一、项目介绍 主服务: 提供左侧导航；顶部快捷操作、用户信息、退出登录等 多个子服务: 提供对应的业务功能 前端微服务详细构建步骤和常见问题，可查看以往文章
随着公司业务的膨胀，处理业务的系统数量也跟着膨胀，运营人员处理一单业务需要在各个系统之间来回穿梭。 为了使运营人员在一个系统里可以完成所有操作，技术人员必须给出解决方案。 其实 iframe 在 “微前端” 这个概念被喊出来之前一直是整合系统的利器，但它有些不理想的地方具体原
封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读，带你全方位刨析 qiankun 框架。 介绍 qiankun 是基于 single-spa 做了二次封装的微前端框架，通过解决了 single-spa 的一些弊端和不足，来帮助大家实现更简单、无痛
第一步 获取 乾坤地址 https://unpkg.com/browse/qiankun@2.5.1/dist/index.umd.min.js 老项目是php模版渲染的，服务是用docker 起的，以php项目为父应用，请问怎么配置。可以使用这个 第二步 集成到项目中 <!-- qiankun START --> <@jversion url="qiankun/index.umd.mi
（本地开发） ## 主应用react cra 应用 my-app-main ## 微应用react cra 应用 my-app-sub ## my-app-main 需要配置内容 1. 安装qiankun yarn add qiankun 2. 注册微应用并启动 ``` 入口文件 index.js中 import { registerMicroApps, start} from 'qiank
本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 微前端的实践分享 需求场景 Brpc服务管理平台想集成开源项目Jaeger(分布式链路追踪系统)的功能，搭建自己的调用链平台，方便使用Brpc框架用户查询自己的服务调用链，以及在此基础上，二次开发，接入公司分布式日
文章目录 SingleSpa及qiankun入门、源码分析及案例一、简介1、微服务2、什么是微前端3、微前端的优点4、微前端的缺点5、如何落地微前端6、示例7、总结 二、SingleSpa1、微前端的价值2、行业现状3、SingleSpa概念4、iframe和single-spa的优缺点iframe的优缺点single-spa的
业务背景：原内管平台子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行npm run dev都非常容易因为内存不够导致崩溃（虚拟桌面内存就8G），业务打算将渠道管理平台中的一个子系统独立出来，用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问
主应用 1. 安装 qiankun $ yarn add qiankun # 或者 npm i qiankun -S 2. 在主应用中注册微应用 main.js import { registerMicroApps, start } from 'qiankun'; registerMicroApps([ { name: 'qiankun-children', //子应用name 和 子应用package.json里"name": &q
使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色 ant-design-pro可以通过config.ts配置全局主题色 所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/ant-design-pro/rele
问题描述： 使用qiankun实现位前端，主应用和子应用1均使用create-react-app创建，子应用2使用vue-cli创建。在本地进行连调时，发现主应用链接子应用1时（react），如果主应用有修改，进行保存后，就会不断请求http://localhost:3001/20d42ab14fe602b52483.hot-update.json，请求结果为404，如下图：
我们在single-spa 技术分析 基本实现了一个微前端框架需要具备的各种功能，但是又实现的不够彻底，遗留了很多问题需要解决。虽然官方提供了很多样例和最佳实践，但是总显得过于单薄，总给人一种“问题解决了，但是又没有完全解决”的感觉。 qiankun 在 single-spa 的基础上做了二次开发，完善
必须保证微应用加载时主应用这个路由页面也加载了。 vue + vue-router 技术栈的主应用： 主应用注册这个路由时给 path 加一个 *，注意：如果这个路由有其他子路由，需要另外注册一个路由，仍然使用这个组件即可。 const routes = [ { path: '/portal/*', name: 'portal',
官网: https://qiankun.umijs.org/zh 首先 主应用 yarn add qiankun 或者 npm i qiankun -S 然后 主应用main.js注册子应用 import { registerMicroApps, start } from 'qiankun'; registerMicroApps([{ name: 'vueDome', // 子应用名称 entry: '//localhost:8081'
