Laravel 9/Vite部署服务器后出现Quill未定义的ReferenceError求助

1. Quill未全局暴露 #

你在app.js里导入了Quill，但没把它挂载到全局对象上。本地开发时Vite的热更新机制可能默认帮你处理了全局访问的问题，但生产打包后不会自动做这件事，导致Blade里的初始化代码找不到全局的Quill变量。

• 处理：在resources/js/app.js的导入语句后加一行：window.Quill = Quill，然后重新执行npm run build再部署。

2. 服务器静态资源未同步或缓存 #

可能你本地打包了新的静态资源，但没把public/build目录同步到服务器；或者服务器的Web服务（比如Nginx）缓存了旧的资源文件，导致浏览器加载的还是没有Quill的旧JS。

• 排查：
  • 对比服务器和本地public/build目录下的文件修改时间，确保文件是最新的；
  • 浏览器强制刷新（Ctrl+F5）加载资源，或者在服务器上清理Web服务的静态缓存。

3. 初始化代码执行时机不对 #

本地开发时资源加载顺序比较可控，但生产环境下Vite打包的资源是异步加载的，Blade里的初始化代码可能在Quill的JS文件加载完成前就执行了，自然找不到Quill。

• 处理：把Blade里的初始化代码放到DOMContentLoaded事件回调里，确保DOM和资源都加载完成后再初始化：

document.addEventListener('DOMContentLoaded', function() {
  new Quill('#editor', { theme: 'snow' });
});

4. Vite路径配置错误 #

如果你的项目部署在服务器的子路径下（比如https://example.com/blog/），但vite.config.js里的base参数没设置对应路径，会导致静态资源加载失败，Quill的JS文件根本没加载到页面里。

• 排查：打开vite.config.js，检查base配置，比如部署在子路径/blog/，就设置base: '/blog/'，重新打包后部署。

5. 依赖打包的环境差异 #

本地和服务器的Node.js版本差异可能导致依赖安装或打包结果不一致，比如本地用Node16，服务器用Node14，部分依赖的编译逻辑会有区别，可能导致Quill的代码没被正确打包进产物。

• 排查：
  • 检查服务器的Node版本和本地是否一致；
  • 在服务器上重新执行npm install和npm run build，确保依赖安装完整，打包过程没有隐藏错误。

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