vuepress domexception failed to execute 'appendchild' on 'node' this node type does not support this method.

将博客换为vuepress后，发现点开某个文章再刷新会报错。

通过查询发现可能原因有

1. cloudflare的auto minify
2. 路径名字母大小写
3. 浏览器缓存
4. cloudflare的Email Address Obfuscation

Cloudflare的auto minify

打开面板发现没法在速度中找到关闭auto minify的选项了 通过在cloudflare论坛 (opens new window)查到可以通过api关闭

curl -s 'https://api.cloudflare.com/client/v4/zones/INSERT_ZONE_ID_HERE/settings/minify' -X PATCH -d '{"value":{"css":"off","html":"off","js":"off"}}' --header "Authorization: Bearer INSERT_TOKEN_HERE" --header "Content-Type: application/json"

首先进入我的个人资料

点击API令牌->创建令牌

选择创建自定义令牌

权限和区域照图片选择。创建好api后记录好token 之后找到cloudflare的站点信息，在概述向下滑动会找到区域 ID

将token以及区域id粘贴到代码执行即可。

import requests

# 设置你的Cloudflare区域ID和授权Token
zone_id = '123'
token = '123'

# 设置请求URL
url = f'https://api.cloudflare.com/client/v4/zones/{zone_id}/settings/minify'

# 设置请求头
headers = {
    'Authorization': f'Bearer {token}',
    'Content-Type': 'application/json'
}

# 设置请求体
data = '{"value":{"css":"off","html":"off","js":"off"}}'

# 发送PATCH请求
response = requests.patch(url, headers=headers, data=data, verify=False)

# 打印响应内容
print(response.text)

返回结果

{"result":{"id":"minify","value":{"js":"off","css":"off","html":"off"},"modified_on":"2024-08-15T05:47:53.971527Z","editable":true},"success":true,"errors":[],"messages":[]}

路径名字母大小写

这个是在Netlify or VuePress：大型悬疑推理篇之——报错到底是谁的锅？ (opens new window)看到的

将所有的 Markdown 文件名称、包含 Markdown 文件的路径、以及在 VuePress 配置文件 config.js 与我自己自定义 versioning 实现中所使用的 sidebar.js 里定义的全部文件名、路径名中的大写字母更换成小写字母。

find my_root_dir -depth -exec rename 's/(.*)\/([^\/]*)/$1\/\L$2/' {} \;

用 rename 工具先重命名目录中包含的文件，再重命名目录本身，有效的避免了命令错误导致文件路径失效的问题

浏览器缓存

删除浏览器缓存或使用无痕测试

删除cloudflare缓存

cloudflare的Email Address Obfuscation

找到cloudflare的面板然后找到Scrape Shield关闭电子邮件地址混淆技术即可

解决方案

我通过上面的步骤还是没有解决这个问题，然后在我看到有的人说部分网页有这个问题的时候，我就去网站上面挨个点了点，发现点击tag的时候，刷新会提示403，然后我就在服务器上给所有文件都加了权限，然后就正常了。

chmod -R 755 /blog/public/*