Statamic CMS中Vite生产环境错误使用热重载的解决方案

问题现象

在使用Statamic CMS构建网站时，开发者可能会遇到一个奇怪的现象：即使在生产环境中已经执行了npm run build命令并部署了构建后的文件，网站仍然会尝试从本地开发服务器(通常是localhost:5173)加载资源，而不是使用构建后的静态资源。

从开发者提供的代码片段可以看到，页面错误地引用了开发服务器的资源路径：

<script type="module" src="http://localhost:5173/@vite/client"></script>
<script type="module" src="http://localhost:5173/resources/js/site.js"></script>
<link rel="stylesheet" href="http://localhost:5173/resources/css/site.css" />

问题根源

这个问题的根本原因在于Vite的自动检测机制。Vite会检查public/hot文件是否存在，如果该文件存在，Vite就会启用热重载(HMR)功能，并尝试从开发服务器加载资源。

在开发环境中，当我们运行npm run dev时，Vite会自动创建这个public/hot文件；当开发服务器关闭时，它应该会自动删除这个文件。然而，在某些情况下，这个文件可能会被意外保留或被错误地部署到生产环境中。

解决方案

解决这个问题的方法非常简单：

1. 检查生产环境的public目录下是否存在hot文件
2. 如果存在，删除该文件
3. 确保.gitignore文件中包含public/hot，防止该文件被意外提交到版本控制

最佳实践

为了避免这类问题在生产环境中发生，开发者应该：

1. 在部署前清理构建目录
2. 设置自动化部署流程时，确保包含清理步骤
3. 定期检查生产环境的文件结构是否符合预期
4. 了解Vite的工作原理和配置选项

总结

Statamic CMS结合Vite构建前端资源时，public/hot文件的存在与否直接决定了资源加载的行为模式。生产环境中出现热重载问题通常就是这个文件未被正确清理导致的。通过理解这一机制，开发者可以快速定位和解决类似问题，确保生产环境始终使用构建后的静态资源。