组态页面渲染器通过npm包方式使用页面没有渲染成功的问题

前言

在项目开发过程中，计划将组态页面的渲染器集成到组件库，以 npm 包的形式供后续项目模板复用。如此一来，倘若组态页面渲染出现问题，便能简化修复与迭代工作。

遇到问题

采用本地引入方式开发完成后，切换至 npm 包方式使用，此时面包屑可正常显示，然而组态页面部分却呈现空白状态。

分析问题

1. 既然面包屑显示正常，那就表明通过向组件传入 Router 对象进行相关操作并无问题，毕竟面包屑与组态页面共同构成了项目中的具体功能页面。不可能 Router 有问题，面包屑却还能正常显示。
2. 推测组件打包生成 npm 包后，自身未携带 Vue 环境，致使 Vue 内置特殊元素 <component> 渲染失败，此前使用 Pinia 时就碰到过类似情况。
3. 那么，该如何在组件里创建 Vue 环境呢？
4. 要是不使用 <component>，而改用渲染函数来实现会怎样呢？
5. markRaw 的作用是什么？
6. 利用渲染函数实现后，发现打包成 npm 包使用时依旧出现空白，这就说明并非 <component> 的问题，如此一来，问题范围便缩小到组态页面的数据源上了。
7. 对比本地引用和 npm 包两种方式下的数据请求差异，发现使用 npm 包时，存在接口未发起请求的情况，进而定位到问题根源。

问题原因

由于该渲染器是在项目中使用，其请求的 baseURL 是通过 window.location.origin 获取的。在本地引入使用时，本地开发服务器地址为 http://localhost:3000/，并且在 Vue 项目的 vite.config.ts 中已做代理，所以请求正常。但当把渲染器代码移至组件库并以 npm 包方式使用时，它自行获取的请求地址仍是 http://localhost:3000/，并未经过代理处理，致使请求资源的接口异常，最终造成页面空白。

const baseURL = import.meta.env.DEV ? "http://192.168.50.20" : window.location.origin

总结

解决 Bug 的思路仍有待提升，自己还是过于急于求成了。刚察觉到问题的一点苗头，就贸然行事、妄下结论，实在有些武断。一开始认定是 <component> 的问题，就应当采用排除法，不该如此笃定。实际上，只需用简单示例测试一下，便能排除该选项，也不至于耗费大量精力深入研究如何在组件里创建 Vue 环境？如何用渲染函数实现组件？平白浪费了许多时间。

每次解决完一个 Bug 之后都会觉得，这个算啥问题，真的不值一提。可在解决过程中，却常常感到无奈，好几次都差点放弃。原本代码放在项目中使用正常，非要解耦，感觉像是没事找事。不过，最终还是坚持了下来，觉得应该差不多能弄清楚问题所在了。虽说花费的时间不太划算，就如同这篇文章写得好似没什么价值一般，但总结一下解决 Bug 的心路历程，相信还是会有所收获的。积累到一定程度，便能为自己提供更多面对问题时的视角与启发。