当前位置: 首页 > news >正文

[qiankun]-部署后线上问题

[qiankun]-部署后线上问题

  • 微服务加载问题-现象1
    • 现象描述
    • 问题分析
    • 解决方案
  • 微服务加载问题-现象2
    • 现象描述
    • 问题分析
  • 微服务加载问题-现象3
    • 现象描述
    • 分析
    • 解决方案

属于项目打包后,部署到服务器上,所遇到的部分问题

微服务加载问题-现象1

现象描述

项目部署实践中遇到了,登录系统后,初次点击路由进行微服务加载,页面无法加载的问题,但是刷新后正常微服务正常加载
路由状态:
所有微服务在一个微服务的路由页面统一展示
其它公共页面在其它路由中展示

问题分析

首先确定是否是因为,在注册微服务时,展示微服务的路由容器ID没有渲染的缘故,对于该问题一直存疑?!

因为页面在出现无法加载微服务页面问题后,直接刷新页面后微服务却能正常加载,那么应该不是容器ID的缘故

通过运行时的日志发现,在调用微服务的时候,路径地址没错,但是加载微服务的生命周期都没有实现,例如 beforeLoad,正常情况下应该执行该生命周期

    registerMicroApps(microApps, {beforeLoad: [app => {console.info(`${app.name}的beforeLoad阶段`)NProgress.start();return Promise.resolve();}],beforeMount: [app => {// console.log(`${app.name}的beforeMount阶段`)NProgress.inc();return Promise.resolve();}],afterMount: [app => {// console.log(`${app.name}的afterMount阶段`)NProgress.done();return Promise.resolve();}],beforeUnmount: [app => {// console.log(`${app.name}的beforeUnmount阶段`)return Promise.resolve();}],afterUnmount: [app => {// console.log(`${app.name}的afterUnmount阶段`)return Promise.resolve();}]});

解决方案

做出合理假设,是不是没有注册成功,也即注册时 microApps 为[],长度为0

做出测试,修改注册微服务的位置,在microApps赋值的位置之后进行 registerMicroApps ,然后发现页面正常加载了… 所以是因为某些原因registerMicroApps没有执行导致的!!!

当执行 registerMicroApps 方法的时候,microApps的参数container 并不是要求执行时必须展示出来的,有可能此时containerId还没有渲染出来,
但是这个不影响微服务的注册

微服务加载问题-现象2

现象描述

在解决以上问题后,也即在store文件中获取到microApps后立刻注册,发现虽然不会出现登录后初次点击路由进行微服务加载无法加载现象了,但是出现了新的问题,若是此时刷新页面将无法正常加载了

问题分析

根据上次的经验分析,是刷新后微服务的注册没有了,因为之前修改我们是在登录成功的时候进行数据的获取并注册微服务,虽然刷新后实现了数据的本地化,store中的数据仍然存在,但是并没有重新调用接口获取数据,注册的操作自然也就没有了
根据vue的生命周期onMounted初次渲染后执行,在该位置根据条件重新注册微服务registerMicroApps即可

上述两个问题一般在手动加载的时候是不会遇到的, 因为手动加载loadMicroApp()一般都是在微服务的路由页面上执行,每次微服务的路由加载的时候执行

微服务加载问题-现象3

现象描述

在排除了以上所有问题后,微服务加载过程中,有一个微服务页面总是无法正常挂载,但是在该路由页面直接刷新页面的时候又正常挂载了,而其它微服务都能在第一次点击的时候正常加载,经过对比分析发现是微服务的渲染函数中,这一行代码导致的,这一行代码被写成了:

app.mount(container ? "#app" : "#app");

分析

微服务挂载的时候是根据主服务传递的 container 进行挂载的,因为 container是指定的主服务的容器,而#app则是子服务单独运行的挂载容器,因为主服务在加载子服务的时候 container 是已经存在的,所以子服务挂载的位置应该是 container中包含的id为app的dom节点上,因为如果是多页签页面可能存在多个#app,所以一定要指定是 container 中的id为app的容器

解决方案

app.mount(container ? container.querySelector("#app") : "#app")
http://www.lryc.cn/news/16878.html

相关文章:

  • 位图数组 布隆过滤器
  • 多线程Thread常用方法和状态
  • Codeforces Round #836 (Div. 2)
  • Python学习之项目实践: 写一个MP3播放器
  • RocketMQTemplate 实现消息发送
  • 教师干货丨这5款微课必备提效神器,我要告诉全世界!
  • timm使用swin-transformer
  • 【java基础】java八大基本数据类型和运算符
  • Mybatis源码学习笔记(四)之Mybatis执行增删改查方法的流程解析
  • 浅谈测试用例设计
  • python 利用装饰器实现类似于flask路由
  • git 拉取远程分支到本地
  • Answering Multi-Dimensional Range Queries under Local Differential Privacy
  • 手把手搭建springboot项目05-springboot整合Redis及其业务场景
  • Flutter基础语法(六)var、final、const、late
  • Linux之安装node
  • 二叉树、二叉搜索树、二叉树的最近祖先、二叉树的层序遍历【零神基础精讲】
  • 【算法】【数组与矩阵模块】求最长可整合子数组和子数组的长度
  • 数据结构:循环队列的实现(leetcode622.设计循环队列)
  • [qiankun]实战问题汇总
  • Kafka(6):服务端常用参数配置
  • 2023爱分析·云原生智能运维中台市场厂商评估报告:秒云(miaoyun.io)
  • hadoop容器化部署
  • 【07-JVM面试专题-JVM运行时数据区的虚拟机栈你知道吗?它的基本结构是什么呢?你知道栈帧的结构吗?那你说说动态链接吧?】
  • Java性能优化-GC优化基础
  • 【Tomcat】IDEA编译Tomcat源码-手把手教程
  • 如何弄小程序?公司企业可以这样做小程序
  • 【Git】IDEA集合Git和码云
  • [USACO03FALL / HAOI2006] 受欢迎的牛 G(C++,强连通分量)
  • Vue 动态路由接口数据结构化为符合VueRouter的声明结构及菜单导航结构、动态路由懒加载方法