介绍 | DataV (网址)
问题背景:
在vue3+vite的项目中引入DataV之后 运行报错,报错示例如下
排错1
最起初了解到的解决方法,在vite.config.ts中进行datav的配置(部分人配置可解决,配置后不可解决),配置完成后仍然无法解决
export default defineConfig({
//下方代码解决引入datav可视化大屏后报错
optimizeDeps: {
// 开发时 解决这些commonjs包转成esm包
include: [
"@jiaminghi/c-render",
"@jiaminghi/c-render/lib/plugin/util",
"@jiaminghi/charts/lib/util/index",
"@jiaminghi/charts/lib/util",
"@jiaminghi/charts/lib/extend/index",
"@jiaminghi/charts",
"@jiaminghi/color",
],
},
build: {
// 打包时需要另外处理的commonjs规范的包
commonjsOptions: {
include: [
/node_modules/, // 必须包含
],
},
},
});
解决思路及方法
分析报错的信息,问题是出在datav包里的:key="i" 上面 ,应该放到template标签上的Key 放到了rect标签上所导致的 手动将key的位置 换一下即可
报错信息参考第一张图
我们顺着对应的报错信息找到对应的文件去修改
应该是有两处位置需要重写一下key的位置(decoration6 , decoration3)
照上面的方法修改完之后 重新运行一下项目就没问题了