快捷導(dǎo)航

Vue3使用dataV報錯問題的解決方法

更新時間：2023年11月22日 14:30:15 作者：會說法語的豬

這篇文章主要為大家詳細(xì)介紹了Vue3中使用dataV報錯問題的解決方法,文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

報錯問題

首先安裝：

pnpm add @dataview/datav-vue3

1. 全局注冊報錯

然后main.ts全局注冊

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啟動的時候直接報錯，并且發(fā)現(xiàn)dataV下面有波浪線報錯

2. 按需引入報錯

<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>

發(fā)現(xiàn)還是同樣的報錯

解決

后來發(fā)現(xiàn)該庫中的package.json中給的出口有問題

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

"module": "./es/index.js",

修改為

"module": "./es/index.mjs",// 修改后的

如果要全局注冊的話還需要在node_modules/@dataview/datav-vue3/es/index.mjs添加：

//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);
    })
}

或者

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中添加腳本，即執(zhí)行完npm install之后再自動執(zhí)行一個腳本將node_modules中的源碼替換掉，這需要我們提前將修改好的文件放在項目目錄中，如下：

新建lib文件夾，將修改好的文件放在其中

然后在package.json中scripts中添加

"scripts": {
  "postinstall": "node install-datav-patch.js"
}

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

install-datav-patch.js

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))

最后再重新執(zhí)行npm install或者pnpm install方法即可

到此這篇關(guān)于Vue3使用dataV報錯問題的解決方法的文章就介紹到這了,更多相關(guān)Vue3使用dataV報錯內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: