Vue3 + Vite 引入dataV - Internalserver error:＜template v-for＞ key should be placed on the ＜template＞

前言：大屏需要使用dataV的边框及装饰，因此在Vue3 + Vite的项目中引入dataV

具体的安装及使用请看这里Vue3 dataV 使用initWH()解决因使用边框造成组件宽高异常的问题 - 附完整示例_datav 大屏,高度不够处理-优快云博客

报错1

[vite] Internal server error: <template v-for> key should be placed on the <template> tag.

解决办法

将以上两个文件的 :key="i" 移动到 template 标签，如下图所示

报错2

Uncaught SytaxError: The requested module"/node_modules/@jiaminghi/o render/lib/index.js?v=db5ca2f2does not provide an export named "default

由于vite开发时会对依赖进行预构建，dataV源码中引入了其他commonjs包，但vite并没有将这些依赖预构建转成esm，因此需要在vite.config.js/ts中配置告知vite哪些依赖需要转成esm格式。

解决办法

vite.config.js/ts

export default defineConfig({
  // ... 省略其他配置
  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/, // 必须包含
      ],
    },
  },
});

参考

Vite,Vue3项目引入dataV报错的解决方法_datav vue3引入报错-优快云博客

该参考有附加内容，大家可以去看看

  欢迎扫描下方二维码关注VX公众号