首页 > TAG信息列表 > QIANKUN

1. qiankun 遇到的问题

// vue3 + qiankun 项目改造遇到的问题// 1. 获取当前路由,使用 useRoute 或者 useRouter 直接获取或者刷新页面拿到的是 / , 只有在 watch 和 watchEffect 中监听才能拿到当前路由// 2. 路由配置name不能相同, 相同会加载不出来 // vueRouter momery 模式 https://blog.csdn.net/q

webpack5 图片转base64

webpakc5中asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。     qiankun子应用集成到主应用的时候,图片不显示,可以转base64  

乾坤(qiankun)结合vue入门

前言 官方入门教程 :https://qiankun.umijs.org/zh/cookbook 微应用路由模式选择:location.pathname--hash demo参考 常见问题 在主应用的某个路由页面加载微应用 注意事项 主应用和各个微应用之间挂载id(app)命名尽量保持不同,避免挂载被覆盖,同时也方便调试 微应用路由应该和主应

上线一个阿里 QianKun “微前端”逼走了 2 位 90后

上线一个阿里 QianKun “微前端”逼走了 2 位 90后 爱前端不爱恋爱     113 人赞同了该文章 序言 作为一个团队领导者,需要经常帮助组员解决各类阻塞问题。 而我一直从事后端的开发,导致对前端的知识储备并没有那么丰富(实际很简陋)。 鉴于当下流行的开发模式几乎

常用插件及文章收藏-js

微前端 1.qiankun https://qiankun.umijs.org/zh/guide 2.micro-app https://zeroing.jd.com/docs.html#/ 加密 1.https://www.jianshu.com/p/27e10f3202f0

qiankun vue3项目额外注意

如果接入的项目是使用vue3构建的,需要额外进行以下两项更改: 首先,在实例instance赋值时,务必确保是 createApp 函数的返回值赋值给instance,若后续有链式调用,先完成instance赋值操作后再进行链式调用。 正确的方法: instance = createApp(currentApp); instance.use(store)      ...

关于qiankun与vue-cli的使用和构建过程

2022年了,我还在研究qiankun,都被用烂了。看到招聘要求上一栏写着会qiankun,我默默的学起来。 这里主应用和子应用都是用vue-cli4X框架,期间遇到了一些坑也都解决了。 第一步安装qiankun yarn add qiankun # 或者 npm i qiankun -S main为主应用,sub-app1,sub-app2为微应用,如下图。

前端微服务qiankun 2.x主子应用通信代码片段

主应用代码 主应用工程里面源代码新建qiankun/index.js,通信代码如下: import { initGlobalState } from "qiankun"; import store from '@/store' // 主应用与微应用数据通信 const state = { subappClassName: '' // 设置子应用打包根的class类名 } const actions = initGlobal

qiankun 接入之子系统

入口文件增加乾坤生命周期钩子导入 /** * bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。 * 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。 */ export async

vivo 商品中台的可视化微前端实践

一、背景 在电商领域内,商品是一个重要组成部分,与其对应的商品管理系统,则负责商品的新建、编辑、复制等功能。随着商品管理系统的成熟稳定和业务上的扩展需求,催化出了商品中台的诞生。它可以将现有商品功能最大效率的复用在很多业务上(公司内业务、公司外业务等)。而不是仅限于当前团

关于 qiankun加载第三方sdk、js的问题

项目背景:qiankun、vue2.0、vuecli3.0 问题:当想在子服务中添加 第三方的js库或者sdk时,在public/index.html内引入相应的js,再在相应的子服务的main.js中 window全局对象上 访问注入的js,这时候问题就出现了 在相应的子服务端口直接访问时,可以访问的到相应的 js对象,但是在通过主服务(

qiankun 微服务实现主题换肤

关注公众号: 微信搜索 前端工具人 ; 收货更多的干货 原文链接: 自己掘金文章: https://juejin.cn/post/7009214640030744589 一、项目介绍 主服务: 提供左侧导航;顶部快捷操作、用户信息、退出登录等 多个子服务: 提供对应的业务功能 前端微服务详细构建步骤和常见问题,可查看以往文章

微前端-初识qiankun

随着公司业务的膨胀,处理业务的系统数量也跟着膨胀,运营人员处理一单业务需要在各个系统之间来回穿梭。 为了使运营人员在一个系统里可以完成所有操作,技术人员必须给出解决方案。   其实 iframe 在 “微前端” 这个概念被喊出来之前一直是整合系统的利器,但它有些不理想的地方具体原

微前端框架 之 qiankun 从入门到源码分析

封面 简介 从 single-spa 的缺陷讲起 -> qiankun 是如何从框架层面解决 single-spa 存在的问题 -> qiankun 源码解读,带你全方位刨析 qiankun 框架。 介绍 qiankun 是基于 single-spa 做了二次封装的微前端框架,通过解决了 single-spa 的一些弊端和不足,来帮助大家实现更简单、无痛

FreeMaker如何使用 QIANKUN 微前端小计

第一步 获取 乾坤地址 https://unpkg.com/browse/qiankun@2.5.1/dist/index.umd.min.js 老项目是php模版渲染的,服务是用docker 起的,以php项目为父应用,请问怎么配置。可以使用这个 第二步 集成到项目中 <!-- qiankun START --> <@jversion url="qiankun/index.umd.mi

初次使用qiankun

(本地开发) ## 主应用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入门、源码分析及案例

文章目录 SingleSpa及qiankun入门、源码分析及案例一、简介1、微服务2、什么是微前端3、微前端的优点4、微前端的缺点5、如何落地微前端6、示例7、总结 二、SingleSpa1、微前端的价值2、行业现状3、SingleSpa概念4、iframe和single-spa的优缺点iframe的优缺点single-spa的

vue qiankun 子页面 不显示也不报错

业务背景:原内管平台子系统越来越多,项目越来越大,打包发布需要十几分钟,本地运行npm run dev都非常容易因为内存不够导致崩溃(虚拟桌面内存就8G),业务打算将渠道管理平台中的一个子系统独立出来,用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问

微前端框架qiankun应用及部署

主应用 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使用qiankun微服务配置动态主题色

使用微服务后,遇到一个问题,主应用和子应用的主题色不一致.希望可以通过主应用的颜色动态变换子应用的主题色 ant-design-pro可以通过config.ts配置全局主题色 所有最优的方法是可以通过改变主题色,来动态配置.官方最新版本的https://github.com/ant-design/ant-design-pro/rele

解决开发环境qiankun项目请求“Cannot GET /20d42ab14fe602b52483.hot-update.json”问题

问题描述: 使用qiankun实现位前端,主应用和子应用1均使用create-react-app创建,子应用2使用vue-cli创建。在本地进行连调时,发现主应用链接子应用1时(react),如果主应用有修改,进行保存后,就会不断请求http://localhost:3001/20d42ab14fe602b52483.hot-update.json,请求结果为404,如下图:

微前端框架 qiankun 技术分析

我们在single-spa 技术分析 基本实现了一个微前端框架需要具备的各种功能,但是又实现的不够彻底,遗留了很多问题需要解决。虽然官方提供了很多样例和最佳实践,但是总显得过于单薄,总给人一种“问题解决了,但是又没有完全解决”的感觉。 qiankun 在 single-spa 的基础上做了二次开发,完善

qiankun如何在主应用的某个路由页面加载微应用

必须保证微应用加载时主应用这个路由页面也加载了。 vue + vue-router 技术栈的主应用: 主应用注册这个路由时给 path 加一个 *,注意:如果这个路由有其他子路由,需要另外注册一个路由,仍然使用这个组件即可。 const routes = [ { path: '/portal/*', name: 'portal',

vue-qiankun微前端

官网: 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'