记录 vue 打包组件 slot 显示 undefined 的问题

记录一次在开发 vue 组件时,本地测试正常,发布到 npm 后,别人使用的时候,slot 插槽显示为空或 undefined 的问题

在开发组件的时候,遇到一个很怪异的问题,我之前打包发布组件后自测和别人使用都是是没问题的,后面删了 package-lock.json 后重新安装过后,本地开发打包测试都是正常的,但是发布到 npm 后,别人在使用的时候,插槽显示 undefined 或着啥也不显示。

查阅资料后发现是 vue 版本的问题

在 vue 中 renderSlot 方法 调整,在 v2.6.13 版本,renderSlot 第二个参数支持 函数类型,同时 vue-template-compiler 编译 slot 返回一个函数,但是 v2.6.12 版本,renderSlot 第二个参数只是 VNode,同时 vue-template-compiler 编译 slot 直接返回一个 VNode。因此如果 vue-template-compiler 版本比 vue 版本高,就会出现这个问题

vue 2.6.12
vue2.6.12
vue 2.6.13
vue2.6.13

由于我在删除 package-lock.json 后,重新安装 vue-template-compiler 和 vue 的包自动升级到了 2.6.3,所以我本地是没有问题的,而其他项目的 vue 都是 2.6.12 甚至更低版本。

最后我把 vue 和 vue-template-compiler 的版本都降到了 2.6.12,问题解决。

最后,血的教训,不要随便删 lock 文件。。。。

参考: