介绍 | 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）

照上面的方法修改完之后 重新运行一下项目就没问题了