主应
基于qiankun从零搭建微前端项目
基于qiankun从零搭建微前端项⽬微前端是⼀种多个团队通过独⽴发布功能的⽅式来共同构建现代化 web 应⽤的技术⼿段及⽅法策略。⼀、什么是微前端“微前端”⼀词最早在2016年提出,它将后端微服务的概念扩展到前端世界。简单来说,就是将⼤型的wen渐进式项⽬拆分成⼀个个⼩型⼯程,即微应⽤。每个微应⽤都能独⽴开发、部署、运⾏,然后由主应⽤将所有微应⽤整合在⼀起,实现所有页⾯的展⽰和交互。⼆、为什么⽤微...
解决微前端qiankun使用iconfont样式冲突问题
解决微前端qiankun使⽤iconfont样式冲突问题⼀、问题背景 ⾸先遇到的样式冲突,不是什么ui库的冲突,⽽是iconfont的冲突,我是在改造两个线上项⽬的时候遇到的。 在 iconfont 官⽹有我的 2 个项⽬,主应⽤和微应⽤,2个icon使⽤的类名是⼀样的。可以看到两个应⽤的图标命名是⼀致的,不过主应⽤是空⼼的,微应⽤是实⼼的。 问题是:当点击菜单...
微前端qiankun从搭建到部署的实践
const microApps = [{name: 'sub-vue',entry: '//localhost:7777/',activeRule: '/sub-vue',container: '#subapp-viewport', // ⼦应⽤挂载的divprops: {routerBase: '/sub-vue' // 下发路由给⼦应⽤,⼦应⽤根据该值去定义qiankun环境下的路由}},{n...
一个后端是如何排查出前端技术问题的
⼀个后端是如何排查出前端技术问题的后端开发是如何排查前端技术问题的简单的⾃我介绍刚毕业进了⼀家国资,都是全栈开发,那时还是 JavaScript,JQuery 的 DOM 操作,操作得⼀6⼀6的,后因为觉得太安逸然后跳了⼀家技术栈⽐较新的上市公司专⼼做后端开发,现在已经是后端开发的中流砥柱,主要负责项⽬的技术攻坚。已经考了软件设计师证,今年已报名考系统架构师证,⽬标是做⼀名资深的架构师。⼀、技术背...
微前端问题汇总
微前端问题汇总前⾔微前端是搭建起来了,但是要⽤起来啊,把原来的⼏个项⽬集成进来的过程遇到问题总结。零、沙箱设置的简单理解strictStyleIsolation = false可以获取到⼦应⽤的dom节点,主应⽤可修改⼦应⽤样式,但是⼦应⽤不可修改主应⽤的样式。需要注意样式不能冲突。strictStyleIsolation = true样式严格分离,不可获取到⼦应⽤的dom节点。⼀、vue-cli...
乾坤微前端_微前端qiankun项目实践!!!防踩坑指南
乾坤微前端_微前端qiankun项⽬实践防踩坑指南作者:zxh1307导语最近在做微前端的项⽬ , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默⽆语两⾏泪 哈哈. 在此次将采坑部分都记录下来, 让更多的⼈少⾛点弯路 , 此项⽬使⽤ 蚂蚁⾦服qiankun 为基础作为开发 . 话不多说 开讲那什么是 qiankun 呢qiankun 是⼀个基于 single-...
基于qiankun微前端的部署方案
基于qiankun微前端的部署⽅案微前端项⽬在本地开发完成后,接下来就需要考虑如何部署上线。主应⽤和微应⽤都应该是独⽴开发和部署的,属于不同的仓库。⼀、部署在同⼀服务器如果服务器数量有限,或不能跨域等原因需要把主应⽤和微应⽤部署在⼀起。通常的做法是主应⽤部署在⼀级⽬录,微应⽤部署在⼆/三级⽬录。1.1 微应⽤改造由于微应⽤部署在⾮根⽬录,微应⽤打包之前需要配置webpack构建时的publicPa...