- 使用框架: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 { default as Collapse } from 'ant-design-vue/es/collapse';
const { Panel } = Collapse;
import 'ant-design-vue/es/collapse/style/index.css';