- 使用框架:vben-admin 2.8.0
- 对应ant-design-vue版本:2.2.8
- 对应vite版本:2.6.13
- node_modules下载方法:yarn
- 报错的组件:Tree
- 报错:TypeError: Cannot set properties of undefined (setting ‘name‘)
- 触发方式:使用该Tree组件的页面刷新后白屏
- 排查方法:在vite.config.ts文件的build下添加sourcemap: true用于问题溯源
- 结果:发现在node_modules的tree组件index.js下
- 解决方法:注释掉Tree.TreeNode.name = ‘ATreeNode’;
app.component(Tree.TreeNode.name, Tree.TreeNode);直接写死app.component(‘ATreeNode’, Tree.TreeNode)
如下图所示

疑惑点:为什么在开发环境下没有问题,打包后会发生呢?
后续:刷新页面仍旧出现渲染不出标签的问题。
发现是vben的二次封装ant组件导致组件打包后触发的。
于是可以引用原生的ant组件,避开vben封装的ant组件来解决。比如引用Collapse以及其下的Panel为例。其中需要注意的是要引入对应的CSS样式文件,否则打包后会发生样式丢失的问题。
import {

在使用vben-admin2.8.0和ant-design-vue2.2.8时,遇到Tree组件在打包后报错'TypeError: Cannot set properties of undefined (setting ‘name‘)'。问题出现在Tree.TreeNode的name属性设置上,通过开启sourcemap定位到问题代码。解决方法是注释掉相关赋值,并直接注册组件。此外,由于vben的二次封装,建议直接引用ant-design-vue的原生组件以避免问题,同时注意导入对应的CSS样式文件。
最低0.47元/天 解锁文章
1050

被折叠的 条评论
为什么被折叠?



