使用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.js
import { 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);
}
},
});