Nuxt生产环境报DOMException: appendChild执行失败错误如何解决

DOMException: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

问题触发原因 #

这个报错的本质是代码尝试向不支持插入子节点的节点类型（比如文本节点、注释节点、Doctype节点）调用appendChild方法，结合Nuxt+Vue生产环境触发、清除应用数据即可恢复的特征，核心原因有三类：

• 静态资源缓存不匹配
  生产环境部署时如果配置了过强的静态资源强制缓存策略，上一版部署的JS/CSS资源还缓存在用户本地，新部署的服务端返回的HTML结构已经更新，老旧的JS代码运行时匹配到错误的DOM节点，就会拿到非容器节点调用插入方法触发报错，清除缓存后拉取到新的匹配资源即可恢复。
• Hydration 节点不匹配
  采用SSR/SSG模式的Nuxt应用，服务端返回的DOM结构和客户端Hydrate阶段Vue生成的虚拟DOM结构不一致，生产环境下Vue不会抛出明确的不匹配警告，会静默尝试修复节点结构，修复过程中容易出现节点类型判断错误，误操作到非容器节点触发报错。如果代码中存在仅客户端执行的DOM修改逻辑（比如包裹在process.client判断中的DOM操作、第三方客户端插件修改DOM），服务端渲染时没有对应结构，大概率会触发这类不匹配问题。
• 旧Service Worker缓存问题
  如果项目开启了Nuxt PWA模块，旧版本的Service Worker会持续缓存上一版的页面资源，新部署后旧Service Worker返回的资源和新版代码不兼容，也会触发该报错，清除应用数据时会同时移除旧的Service Worker，问题就会消失。

内容的提问来源于stack exchange，提问作者Debashis Panda