vben2使用ant2的Tree组件vite打包后,刷新页面出现报错TypeError: Cannot set properties of undefined (setting ‘name‘)

  1. 使用框架:vben-admin 2.8.0
  2. 对应ant-design-vue版本:2.2.8
  3. 对应vite版本:2.6.13
  4. node_modules下载方法:yarn
  5. 报错的组件:Tree
  6. 报错:TypeError: Cannot set properties of undefined (setting ‘name‘)
  7. 触发方式:使用该Tree组件的页面刷新后白屏
  8. 排查方法:在vite.config.ts文件的build下添加sourcemap: true用于问题溯源
  9. 结果:发现在node_modules的tree组件index.js下
  10. 解决方法:注释掉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';
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值