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