2021 年 02 月 - 2 文章

关于微前端实现原理与ngx-planet(四)服务端渲染

  |   0 评论   |   0 浏览

1.为什么要服务端渲染 因为公司后端服务在 k8s 上,是分布式的微服务,之前端全部打包部署在了物理机器(虚拟机)nginx 上,如果通过 helm 做应用商店的话,nginx 前端这部分无法处理,包括灰度部署,CI 等,全部都只能做到接口级别的处理,并不能连带静态资源文件一起处理,所以基于分布式的前端整改迫在眉睫。 偶然发现了 ngx-planet,整篇文章基于前几篇文章,可以看之前的几篇文章。 2.如何基于 ngx-palnet 进行服务端渲染 2.0 有路由前缀的情况下服务端渲染 ngx-planet 如何改进 在 start 函数中监听路由阶段,其中的 startWith 过滤路由要把 location.pathname 修改好,要将前缀去除掉,至于如何动态去除不写死,仁者见仁智者见智。 2.1 首先,准备打包好的静态文件 将 build 命令修改,注意 --deploy-url 的意思是,打包完成后,静态资源路径是什么 "build": "ng build --prod --deploy-url=/static/star-universe/ --base-href=/star-universe", 打....

关于微前端实现原理与ngx-planet(三)客制化

  |   0 评论   |   0 浏览

客制化 由于公司和公司的业务不同,所以在 ngx-planet 的基础上,需要作出一些针对于业务的拓展 目前分出四个基础项目 @yunzai/stars:封装了用户认证,元素权限,i18n 等系统初始化信息的内容,需要发包的,意为繁星. star-universe: portal 项目,所有子前端项目的入口,意为宇宙. star-dust:一些可能会通用的 components 都放到这个项目里,统一管理,意为星尘. star-uranus:模版项目,意为天王星. 开发环境 可以看到桌面共有四个编辑器,开发时需要跑起其中三个项目. star-universe,star-dust,star-uranus @yunzai/stars 因为是基础包,所以扩展了哪些功能点,先做一个介绍,因为发包,所以 planet 前缀都被我改名成为了 star 前缀,针对于 ngx-planet 加载过程请看前一篇 link start。 接下来看项目结构 首先基于 ngx-planet 加入了 auth,config,i18n,providers,stomp,token,user 这些文件夹 module 针对于 Module 做出了以下....