DOMException: Failed to execute ‘insertBefore‘ on ‘Node‘: The node before which the new node is to b

记录一下vue项目运行中遇到的问题

情景：点击按钮打开一个打印窗口，关闭后再次点击页面任何地方都无反应，并且打印出异常日志

DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

原因：加载的组件直接使用了v-if在界面中控制显示与隐藏，比如

<Test v-if="xxx" />

解决：将该组件外面包裹一层即可：

<div v-if="xxx">
    <Text />
</div>

或者是在Text组件内部加载一层，以避免vue出错的情况。网上看到大部分的解决方法是将v-if换成了v-show，使该组件所承载的内容一直在DOM树中存在，不稳妥

内容参考：https://blog.csdn.net/zi__kang/article/details/107634758