应用,应用间相互独立,可相互通信。 那么我将使用 微前端框架qiankun 来进行微前端项目搭建。 ...
qiankun 微前端改造成功之后,有几个固定的步骤,但都是在 SPA 页上改造成功的。所以昨天在 SPA 改造之后,我也在想如何能应用到我们项目上去,但是我们项目是有很多 SEO 的需求,所以采用的 SSR 渲染的 NuxtJS 改造的。 NuxtJS 项目和 SPA 的VUE项目还是有挺大差别的,比如没有 mount 挂载的 id,没有 main.js 启动文件,所有的启动类文件都是在 nu ...
2021-07-11 13:20 0 339 推荐指数:
应用,应用间相互独立,可相互通信。 那么我将使用 微前端框架qiankun 来进行微前端项目搭建。 ...
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 一、什么是微前端 “微前端”一词最早在2016年提出,它将后端微服务的概念扩展到前端世界。简单来说,就是将大型的wen渐进式项目拆分成一个个小型工程,即微应用。每个微应用都能独立开发、部署、运行 ...
一、什么是微前端? 我们先来看两个实际的场景: 1、复用别的的项目页面 如果我们的项目需要开发某个新的功能,而这个功能另一个项目已经开发好,我们想直接复用时。注意:我们需要的只是别人项目的这个功能页面的「内容部分」,不需要别人项目的顶部导航和菜单。 一个比较笨的办法就是直接 ...
一、什么是微前端? 我们先来看两个实际的场景: 1、复用别的的项目页面 如果我们的项目需要开发某个新的功能,而这个功能另一个项目已经开发好,我们想直接复用时。注意:我们需要的只是别人项目的这个功能页面的「内容部分」,不需要别人项目的顶部导航和菜单。 一个比较笨的办法就是直接 ...
楔子 首先,目前qiankun框架尚不支持vite, 微应用不能使用vite创建, 即使只是生产环境加的载微应用也不行, 因为vite打包代码时,内部的esbuild会tree shake掉与qiankun相关的生命周期钩子, 主应用没影响,使用什么创建项目都无所谓 主应用 没啥特殊 ...
一、qiankun 常见报错 1、子项目未 export 需要的生命周期函数 先检查下子项目的入口文件有没有 export 生命周期函数,再检查下子项目的打包,最后看看请求到的子项目的文件对不对。 2、子项目加载时,容器未渲染好 检查 ...
一、前言 相信大家对于微前端的概念和思想都有了解过,在此我不再赘述。在我们的业务项目中,由于项目比较大,在日常的开发过程中也暴露出来了问题:项目启动慢,打包部署上线慢。这给我们开发和运维人员带来了很大的不便,有时候有紧急任务需要上线,也得打包半个钟才能交付到运维处。因此,我们打算使用微前端的方案 ...
微前端项目在本地开发完成后,接下来就需要考虑如何部署上线。主应用和微应用都应该是独立开发和部署的,属于不同的仓库。 一、 部署在同一服务器 如果服务器数量有限,或不能跨域等原因需要把主应用和微应用部署在一起。 通常的做法是主应用部署在一级目录,微应用部署在二/三级目录。 1.1 微应用改造 ...