Vue3使用dataV报错问题解决

DataV官网:https://datav-vue3.jiaminghi.com/guide/

vue2中是没有问题的,这是第一次在vue3中使用发现的报错问题

报错问题

首先安装:

javascript 复制代码
pnpm add @dataview/datav-vue3

1. 全局注册报错

然后main.ts全局注册

javascript 复制代码
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import dataV from '@dataview/datav-vue3'

const app = createApp(App)

app.use(router)
   .use(dataV)
app.mount('#app')

然后我们pnpm dev启动的时候直接报错,并且发现dataV下面有波浪线报错

2. 按需引入报错

javascript 复制代码
<template>
  <div class="index">
    <div class="charts-content">
      <BorderBox1>Content</BorderBox1>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { BorderBox1 } from '@dataview/datav-vue3'
</script>
<style scoped>

发现还是同样的报错

解决:

后来发现该库中的package.json中给的出口有问题

找到node_modules/@dataview/datav-vue3/package.json

javascript 复制代码
"module": "./es/index.js",
修改为
"module": "./es/index.mjs",// 修改后的

如果要全局注册的话还需要在node_modules/@dataview/datav-vue3/es/index.mjs添加:

javascript 复制代码
//D, E, G, I, K, g, C, P, h, k, u, w, z, N, Q, S, U, W, Y, _, oo, eo分别是BorderBox1...等组件
export default function(app) {
  const components = [D, E, G, I, K, g, C, P, h, k, u, w, z, N, Q, S, U, W, Y, _, oo, eo]
  components.forEach(component => {
		app.component(component.name, component);
	})
}

或者

javascript 复制代码
export default {
  install(app) {
    const components = [D, E, G, I, K, g, C, P, h, k, u, w, z, N, Q, S, U, W, Y, _, oo, eo]
    components.forEach(component => {
      app.component(component.name, component);
    })
  }
}

上述修改完之后就可以正常引入使用了,但我们修改的是node_modules中的源码,如果下次再安装npm install安装依赖的时候还是会有同样的问题,所以我们要在package.json中scripts中添加脚本,即执行完npm install之后再自动执行一个脚本将node_modules中的源码替换掉,这需要我们提前将修改好的文件放在项目目录中,如下:

新建lib文件夹,将修改好的文件放在其中

然后在package.json中scripts中添加

javascript 复制代码
"scripts": {
  "postinstall": "node install-datav-patch.js"
}

然后在根目录下新建install-datav-patch.js文件:

install-datav-patch.js

javascript 复制代码
const path = require('path')
const fs = require('fs')

const libPackagePath = path.join(__dirname, 'lib/dataview/datav-vue3/package.json')
const libIndexPath = path.join(__dirname, 'lib/dataview/datav-vue3/es/index.mjs')
const modulesPackagePath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/package.json')
const modulesIndexPath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/es/index.mjs')

fs.writeFileSync(modulesPackagePath, fs.readFileSync(libPackagePath))
fs.writeFileSync(modulesIndexPath, fs.readFileSync(libIndexPath))

最后再重新执行npm install或者pnpm install方法即可

相关推荐
RadiumAg33 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo37 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele1 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
初遇你时动了情3 小时前
腾讯地图 vue3 使用 封装 地图组件
javascript·vue.js·腾讯地图
dssxyz3 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
华子w9089258593 小时前
基于 SpringBoot+VueJS 的农产品研究报告管理系统设计与实现
vue.js·spring boot·后端