vue3+vite+antv/x6打包 自定义节点无法显示

使用vue3 vite3打包项目后，自定义节点无法加载，只有内置节点circle，线和port显示出来了

问题描述:
开发环境一切正常，打包以后开启踩坑模式——自定义图形无法添加到画布上。
问题原因:
通过 render 方法渲染的 vue 组件，可以正常显示，但是通过 template 渲染的 vue 组件，build 之后不会正常显示。

我的package.json

"vite": "^3.2.2",
"vue": "^3.2.41",
"@antv/x6": "^1.31.3",
"@antv/x6-vue-shape": "^1.3.2",

解决方案:

1.修改vite.config.js

resolve: {alias: [{find: '@antv/x6',replacement: '@antv/x6/dist/x6.js',},{find: '@antv/x6-vue-shape',replacement: '@antv/x6-vue-shape/lib',},],
}

2.修改注册组件在vue3中写法如下:由template改为render即可

registerPart.jsimport { createVNode } from "vue";
import Count from "./components/Count";
Graph.registerNode("my-count", {inherit: "vue-shape",x: 200,y: 150,width: 150,height: 100,component: {render: ()=>{return createVNode(Count);}},});

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！