当前位置：首页 > news >正文

vue3+vite使用dataV后项目运行报错、页面空白问题

news 2025/7/18 10:26:17

Vue 大屏数据展示组件库官网：http://datav.jiaminghi.com/guide/
我的版本是：“@jiaminghi/data-view”: “^2.10.0”

一、dataV引入，看官网也可

// 安装 （ 我的安装版本 "@jiaminghi/data-view": "^2.10.0"  ）
npm i @jiaminghi/data-view// 在main.js中全局引入
import dataV from '@jiaminghi/data-view'
app.use(dataV)

二、报错解决

1. 找到报错文件，把 :key=“i” 放到上面的 v-for那行里

可能有多个文件出错，一个一个修改就可以了，我这边是2个文件有问题
[plugin:vite:vue] <template v-for> key should be placed on the <template> tag. D:/webXjk/测试用的/vueviteproject/node_modules/@jiaminghi/data-view/lib/components/decoration3/src/main.vue:9:9 7 | > 8 | <rect 9 | :key="i" | ^
在这里插入图片描述

解决方法：看图片
在这里插入图片描述

2. 页面出现空白，看控制台报错

Uncaught SyntaxError: The requested module '/node_modules/@jiaminghi/c-render/lib/index.js?v=d94b69d5' does not provide an export named 'default'

![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d1a8fc1bb4eb4df7b7c791a737cc8f79.png

解决方法：在 vite.config.js 需要添加代码，主要是 optimizeDeps

export default defineConfig({base: '/web/object',  //服务器部署到其他文件这个需要更改 或直接 '' 就可放在任意文件夹plugins: [vue()],build: {commonjsOptions: {include: [/node_modules/,]}},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",],},
})

三、简单使用示例：轮播表 ==》表格滚动

<!-- dataV表格滚动示例 -->
<template><dv-scroll-board :config="config" style="width: 500px; height: 220px" />
</template><script lang="ts" setup>
import { ref } from "vue";let config = ref({header: ["列1", "列2", "列3"],data: [["行1列1", "行1列2", "行1列3"],["行2列1", "行2列2", "行2列3"],["行3列1", "行3列2", "行3列3"],["行4列1", "行4列2", "行4列3"],["行5列1", "行5列2", "行5列3"],["行6列1", "行6列2", "行6列3"],["行7列1", "行7列2", "行7列3"],["行8列1", "行8列2", "行8列3"],["行9列1", "行9列2", "行9列3"],["行10列1", "行10列2", "行10列3"],],
});
</script>