vue 插槽 build打包后 slot位置显示undefined问题

1,342 阅读1分钟

问题

写了一个具名插槽(如下图) image.png

但是小伙伴在打包后,发现页面上这个位置内容显示成了undefined image.png

借鉴了 @快乐是一切 的思路,以及网友的评论

开发中突然遇到页面上出现大量的 undefind,查看代码没有什么问题,主要就是 使用 slot 插槽的位置变成了 underfind 。

经过大量的测试,确定了是 vue 版本的问题,当 vue的版本大于 2.6.12时,就会出现这种情况 由于 vue-template-compiler 需要与vue的版本同步

所以解决方案就是把 vue和vue-template-compiler的版本降低到 2.6.12 及以下即可。

————————————————

版权声明:本文为CSDN博主「快乐是一切」的原创文章

原文链接:blog.csdn.net/weixin_4260…

image.png

确保了的vue和vue-template-compiler版本是一致,并且版本是2.6.11的情况下,决定删掉node_modules重新npm i后,再打包发现正常

总结

最后确定了原因,创建项目时,用的是npm,小伙伴那边在安装依赖的时候使用的是yarn,即便打包也是用yarn打包,但就是会出现undefined,重新用npm操作即可正常,估计是npm和yarn混用了导致的。