解决 vue-quill 组件控制台报错：DOMNodeInserted 废弃问题的完整方案

解决 vue-quill 组件控制台报错：DOMNodeInserted 废弃问题的完整方案

---

问题描述

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

错误提示 DOMNodeInserted 事件已被废弃，需改用 MutationObserver。

---

定位问题

1. 根因分析
   vue-quill 依赖的底层库 quilljs 版本为 1.3.7，其源码中使用已废弃的 DOMNodeInserted 事件监听 DOM 变化。
2. 临时修复
   直接修改 node_modules/quill/dist/quill.js 文件，将第 4237 行代码：

   _this.domNode.addEventListener('DOMNodeInserted', function () {});
   

   替换为：

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

   本地测试验证有效，但需解决远程部署时的同步问题。

---

解决方案：使用 patch-package 持久化修改

核心目标：将对 node_modules 的修改生成补丁文件，确保所有环境（开发、部署）自动应用修复。

---

具体步骤

1. 安装依赖
   安装 patch-package 和辅助工具：

   npm install --save-dev patch-package postinstall-postinstall
   

2. 配置自动执行脚本
   在 package.json 中添加 postinstall 钩子：

   {
     "scripts": {
       "postinstall": "patch-package"
     }
   }
   

   （注：postinstall-postinstall 确保在 npm install 后强制执行补丁）

3. 生成补丁文件
   修改 node_modules 中的代码后，执行：

   npx patch-package quill
   

   生成补丁文件 patches/quill+1.3.7.patch。

4. 提交补丁到版本控制
   将补丁文件纳入代码仓库：

   git add patches/quill+1.3.7.patch
   git commit -m "fix: apply MutationObserver patch for quill@1.3.7"
   

5. 验证部署流程
   在其他环境执行 npm install 时，自动应用补丁：

   npm install
   # 观察输出日志，确认补丁已应用
   

---

知识点总结

1. 为何使用 patch-package？
   • 无需 Fork 仓库：直接基于原包修复，避免维护分叉版本。
   • 版本控制友好：补丁文件可跟踪、可回滚。
   • 跨环境同步：团队协作和 CI/CD 部署时自动生效。

2. 注意事项
   • 依赖升级：若 quill 版本更新（如升级到 2.x），需重新生成补丁。
   • 补丁冲突：若原文件结构变化，可能导致补丁失效，需重新验证。
   • 不提交 node_modules：仅提交补丁文件，保持仓库轻量。

---

最终效果

• 所有开发、测试、生产环境通过 npm install 自动修复问题。
• 补丁文件纳入版本控制，团队协作透明化。
• 无需手动修改 node_modules，提升开发体验。

---

通过此方案，既遵循了开源项目的使用规范，又实现了定制化修复的工程化落地。