如何在Vue组件中本地导入Quill JS代码（非npm安装方式）

你遇到的问题是因为CDN提供的Quill是UMD格式的脚本，不是ES模块，所以没法直接用ES6的import语法导入——它默认会把Quill挂载到全局window对象上，而非提供ES模块的导出。下面是几种可行的解决方法：

方法一：全局脚本引入（最简单） #

1. 将下载的quill.js放到项目的public目录下（比如public/assets/quill.js）
2. 在项目入口HTML文件（通常是public/index.html）中添加脚本标签：

   <script src="/assets/quill.js"></script>
   

3. 在Vue组件中直接调用全局的Quill：

   export default {
     mounted() {
       // 初始化编辑器
       const editor = new window.Quill('#editor', {
         theme: 'snow'
       });
     }
   }
   

方法二：使用script-loader导入（适合webpack项目） #

如果不想在全局引入，可以用script-loader让webpack把UMD脚本当作全局代码执行：

1. 先安装依赖：

   npm install script-loader --save-dev
   

2. 在Vue组件中通过loader导入本地文件：

   // 用script-loader执行本地quill脚本，会自动挂载到window
   import 'script-loader!../../services/quill/quill.js';
   
   export default {
     mounted() {
       const editor = new Quill('#editor', {
         theme: 'snow'
       });
     }
   }
   

方法三：手动修改本地Quill脚本（不推荐） #

如果一定要用ES6import，可以手动修改下载的quill.js，在文件末尾添加ES模块导出：

// 在quill.js文件最后添加
export default Quill;
export { Quill };

之后就能用import Quill from "../../services/quill/quill.js"导入了，但这种方法的缺点是后续更新Quill版本时，需要重复修改这部分代码。

额外提醒 #

别忘了导入Quill的样式文件，同样可以从CDN下载本地后，在组件中引入：

import '../../services/quill/quill.snow.css';

或者在全局HTML中通过<link>标签引入。

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