随笔分类 - qiankun/微前端架构
摘要：一、qiankun框架中微应用之间如何跳转 qiankun框架提供两种跳转方式： 1、通过history.pushState()方式进行跳转 <button onClick={() => { window.history.pushState({ user: {......} }, '', '/app
阅读全文
摘要：主要探究下主应用和多个微应用之间如何使用Vuex来进行状态管理，这其实是对上一篇文章中通信方式第二种方式的补充，因为 vue 主要还是使用 vuex 作为状态管理。 一、场景选择 1、项目现状： 主应用是Vue技术栈，使用Vuex进行状态管理 多个微应用也是Vue技术栈，并且都可能使用Vuex进行状
阅读全文
摘要：一、应该如何划分子应用 在开始介绍 qiankun 的应用通信之前，我们需要先了解微前端架构如何划分子应用。在微前端架构中，我们应该按业务划分出对应的子应用，而不是通过功能模块划分子应用。这么做的原因有两个： 在微前端架构中，子应用并不是一个模块，而是一个独立的应用，我们将子应用按业务划分可以拥有更
阅读全文
摘要：关于其构建过程理解，主要学习这篇文章：https://blog.csdn.net/qq_40882724/article/details/116860994 一、三个概念 首先，要理解三个重要的概念： （1）webpack构建：一个独立项目通过 webpack 打包编译而产生资源包。 （2）remo
阅读全文
摘要：一、如何共享模块 1、NPM 方式共享模块 想象一下正常的共享模块方式，就是 NPM。正常的代码共享需要将依赖作为 Lib 安装到项目，进行 Webpack 打包构建再上线。 对于项目 A 与 B，需要共享一个模块时，最常见的办法就是将该模块抽成通用依赖并分别安装在各自项目中。 2、微前端方式共享模
阅读全文
摘要：一、什么是微前端？ 微前端将微服务理念扩展到前端开发，一般来讲一个微服务架构中会有多个后端团队开发不同的业务服务，而前端通常只有一个团队，集中维护一个 SPA 单页应用，随着时间累加，前端团队维护的 SPA 会随着业务增长越来越大，变得难以维护（项目启动耗时、CI\CD 耗时等）; 微前端可以帮助我
阅读全文
摘要：qiankun 微前端改造成功之后，有几个固定的步骤，但都是在 SPA 页上改造成功的。所以昨天在 SPA 改造之后，我也在想如何能应用到我们项目上去，但是我们项目是有很多 SEO 的需求，所以采用的 SSR 渲染的 NuxtJS 改造的。 NuxtJS 项目和 SPA 的VUE项目还是有挺大差别的
阅读全文
摘要：一、问题背景 当主应用登录后，再进去微应用发现还需要登录，相当于登录状态没有同步。 二、解决方案 —— 主应用与微应用通信 qiankun微前端应用间的通信，我们要利用qiankun框架的initGlobalState和MicroAppStateActions api，相关的api介绍如下： （1）
阅读全文
摘要：微前端就是应用分割，独立运行，独立部署，将原本把所有功能集中于一个项目中的方式转变为把功能按业务划分成一个主项目和多个子项目，每个子项目负责自身功能，同时具备和其它子项目和主项目进行通信的能力，达到更细化更易于管理的目的。 总的来说微前端就是：一个完整应用划分成一个主应用和一个或多个微应用，应用间相
阅读全文
摘要：一、简介 为了解决庞大的一整块后端服务带来的变更与扩展方面的限制，出现了微服务架构（Microservices）： 微服务是面向服务架构（SOA）的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每
阅读全文
摘要：一、qiankun 常见报错 1、子项目未 export 需要的生命周期函数 先检查下子项目的入口文件有没有 export 生命周期函数，再检查下子项目的打包，最后看看请求到的子项目的文件对不对。 2、子项目加载时，容器未渲染好 检查容器 div 是否是写在了某个路由里面，路由没匹配到所以未加载。如
阅读全文
摘要：一、什么是微前端？ 我们先来看两个实际的场景： 1、复用别的的项目页面 如果我们的项目需要开发某个新的功能，而这个功能另一个项目已经开发好，我们想直接复用时。注意：我们需要的只是别人项目的这个功能页面的「内容部分」，不需要别人项目的顶部导航和菜单。 一个比较笨的办法就是直接把别人项目这个页面的代码拷
阅读全文
摘要：一、问题背景 首先遇到的样式冲突，不是什么ui库的冲突，而是iconfont的冲突，我是在改造两个线上项目的时候遇到的。 在 iconfont 官网有我的 2 个项目，主应用和微应用，2个icon使用的类名是一样的。可以看到两个应用的图标命名是一致的，不过主应用是空心的，微应用是实心的。 问题是：当
阅读全文
