台州网站制作教程,网站建设更新,广东省农业农村厅网站,网站流程图[qiankun]-部署后线上问题微服务加载问题-现象1现象描述问题分析解决方案微服务加载问题-现象2现象描述问题分析微服务加载问题-现象3现象描述分析解决方案属于项目打包后#xff0c;部署到服务器上#xff0c;所遇到的部分问题
微服务加载问题-现象1
现象描述
项目部署实…
[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)
