问题的出现

有几次项目部署完毕在线上运行时，测试人员发现某些组件的效果出现异常，比如某些在弹窗modal内的popup弹框的层级异常，显示在了modal底下，或者某个组件（如modal的footer区域的类样式）出现多个css文件的重复定义，导致正常的css效果被覆盖。

对于第一个问题，排查后发现是文件的z-index控制器没有正常初始化，导致z-index异常，debug发现压根儿没运行到对应的代码(PS：对打包混淆后的代码进行debug是真要命)。

第二个问题，发现是多打包了出来一个css文件，而且在这次css文件之后才加载，导致样式被覆盖。

而且这些问题都是本地开发正常，部署上线后才有问题，因此将问题范围缩小到环境和部署上。

处理

后面找到package.lock.json文件，发现里面存在两个组件库ui的依赖文件，其依赖的vue版本分别为27与29版本，导致了该问题。29版本为最外层父级项目的依赖，

解决方案1：

重新统一组件库依赖的vue版本，使多个项目的组件库依赖的vue版本都为同一个。

解决方案2：

最外层父级本身不是一个业务项目，而只是维护了一些公共组件或工具包采用monorepo管理各个子业务项目的容器。而加入组件库依赖也只是为了写公共组件时能够给予组件库的相关代码提示和一些插件自动导入的功能。

基于此，我们把最外层的组件库依赖调整到具体的公共组件包里面，在这里有固定vue版本，整个公共包也只有公共组件需要vue和组件库依赖。

重新install或通过pnpm -r up @组件库 命令升级完后，lock文件仅出现一个dlz-ui依赖，部署后线上恢复正常。