【vue3】使用富文本组件@vueup/vue-quill浏览器[Deprecation]警告‘DOMNodeInserted‘的两种解决方法

场景：

在项目引入富文本组件vue-quill之后，打开浏览器控制台出现如下报错：

原因分析：

目前开源项目quill是在版本v2.0.2，而在@vueup/vue-quill中的quilljs仍是v1.3.7

解决方案

在一番查找之后，尝试了两种解决方案：

1. 添加override（可能有bug）

   在github项目的issue中找到的方法，在package.json添加override让项目中所有引入的quill使用v2.0.2版本
   
   添加后再npm install，再次打开页面查看富文本编辑器，查看控制台，警告消失。
   但是再这里我这边出现一个问题，toolbar的代码块失去了样式，至今没有解决。不清楚是我的问题还是在override这一步后导致的。如果有同样情况或者有解决方案也请告知。
   
   预期现象：
   
   所以重新找解决方法

2. 修改源码中警告的部分
   点击控制台上跳转到警告的代码块
   

   在项目的node_modules/@vueup/vue-quill/node_modules/quill/dist/quill.js修改

   new MutationObserver(() => {}).observe(_this.domNode, { childList: true });
   

   
   再重新运行项目打开控制台，发现警告仍然存在，经过分析，现代前端项目通常使用构建工具（如 Vite、Webpack）来处理模块。这些工具会对依赖（包括 node_modules 中的内容）进行打包、缓存或优化。即使你修改了 node_modules 中的文件，构建工具可能会继续使用缓存版本，而不是重新读取修改后的文件。
   解决方法
   控制台运行：

   Remove-Item -Recurse -Force .\node_modules\.vite\
   

   成功解决。