datav+vue3 引用报错,跳转页面报错,DOMException: Failed to execute ‘removeChild‘ on ‘Node‘: The node to be remov

文章讲述了在使用Vue3和Datav时遇到的引用错误及跳转错误,通过修改DatavVue3库的源代码并重新打包解决,包括在package.json中添加特定脚本和处理node_modules中的文件结构。
摘要由CSDN通过智能技术生成

datav+vue3 引用报错,跳转页面报错,DOMException: Failed to execute 'removeChild' on 'Node': The node to be remov

使用vue3+datav的时候遇到很多莫名其妙的报错
全局引用和按需引用datav报错。解决之后跳转页面又报错。从网上找了一篇博客解决了一半。
引用和跳转报错请移步:
https://blog.csdn.net/m0_51431448/article/details/134550221

根据这篇博客最后写的解决跳转报错的方案写完之后,通过开发者工具查看node_modules中的源码发现并没有修改。
可以在项目的package.json中加入:vite --force

"scripts": {
    "i": "pnpm install",
    "dev": "vite --force --mode base",
    "serve": "vite --mode base",
    "front": "vite --mode front",

使用npm run dev运行。
接着下一步就到了 DOMException: Failed to execute ‘removeChild’ on ‘Node’: The node to be remov这个报错上面。
查找之后发现还是datav的源码问题。在node_modules@dataview\datav-vue3\es\utils\styled.mjs中。

const r = document.createElement("style"), i = (a) => {
  r.innerHTML = v(n, a), document.querySelector("head").appendChild(r);
}, o = () => document.querySelector("head").removeChild(r);

替换成:

const r = document.createElement("style"),
      i = (a) => {
        r.innerHTML = v(n, a);
        document.querySelector("head").appendChild(r);
      },
      o = () => {
        const head = document.querySelector("head");
        if (head && head.contains(r)) {
          head.removeChild(r);
        }
      };

就ok了。
最后把utils放到lib中,修改一下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 libComponentsPath = path.join(__dirname, 'lib/dataview/datav-vue3/es/components')
const libUtilsPath = path.join(__dirname, 'lib/dataview/datav-vue3/es/utils')

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')
const modulesComponentsPath = path.join(
  __dirname,
  'node_modules/@dataview/datav-vue3/es/components'
)
const modulesUtilsPath = path.join(__dirname, 'node_modules/@dataview/datav-vue3/es/utils')

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

fs.rmdirSync(modulesComponentsPath, { recursive: true, force: true })

const dirs = [
  {
    absolutePath: libComponentsPath,
    realtivePath: ''
  }
]

for (let dir of dirs) {
  fs.mkdirSync(path.join(modulesComponentsPath, dir.realtivePath))
  const names = fs.readdirSync(dir.absolutePath)
  for (let name of names) {
    const stat = fs.statSync(path.join(dir.absolutePath, name))
    if (stat.isDirectory()) {
      dirs.push({
        absolutePath: path.join(dir.absolutePath, name),
        realtivePath: path.join(dir.realtivePath, name)
      })
    } else if (stat.isFile()) {
      fs.writeFileSync(
        path.join(modulesComponentsPath, dir.realtivePath, name),
        fs.readFileSync(path.join(dir.absolutePath, name))
      )
    }
  }
}

fs.rmdirSync(modulesUtilsPath, { recursive: true, force: true })

const dirs2 = [
  {
    absolutePath: libUtilsPath,
    realtivePath: ''
  }
]

for (let dir of dirs2) {
  fs.mkdirSync(path.join(modulesUtilsPath, dir.realtivePath))
  const names = fs.readdirSync(dir.absolutePath)
  for (let name of names) {
    const stat = fs.statSync(path.join(dir.absolutePath, name))
    if (stat.isDirectory()) {
      dirs2.push({
        absolutePath: path.join(dir.absolutePath, name),
        realtivePath: path.join(dir.realtivePath, name)
      })
    } else if (stat.isFile()) {
      fs.writeFileSync(
        path.join(modulesUtilsPath, dir.realtivePath, name),
        fs.readFileSync(path.join(dir.absolutePath, name))
      )
    }
  }
}
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值