[qiankun]-部署后线上问题

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

微服务加载问题-现象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")