Highlight JS生产环境失效但开发环境正常，求解决方案（Laravel10等）

针对你遇到的开发环境正常、生产环境失效的问题，以下是针对性排查和解决方法：

1. Cloudflare缓存与压缩干扰 #

• 关闭Cloudflare的自动压缩测试：登录Cloudflare控制台，进入Speed > Optimization，暂时关闭Auto Minify中的JS和CSS选项，验证是否恢复正常。若有效，再配置规则排除HighlightJS相关CDN资源的压缩。
• 绕过缓存：在Caching > Configuration中添加HighlightJS资源URL到Cache Rules，设置为Bypass Cache，确保生产环境加载最新资源。

2. Litespeed页面优化冲突 #

• 检查Litespeed的Page Optimization设置，确认HighlightJS脚本未被延迟加载或合并。若启用了JS Combine，添加HighlightJS的CDN脚本URL到排除列表。
• 清除全栈缓存：执行php artisan cache:clear、php artisan config:clear，同时在Litespeed控制台清理服务器缓存，避免旧资源残留。

3. 脚本执行时机错误 #

生产环境DOM可能未完全加载就执行了初始化代码，修改脚本确保DOM加载完成后运行：

@push('script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            hljs.addPlugin(new CopyButtonPlugin());
            hljs.highlightAll();
        });
    </script>
@endpush

同时确认@stack('script')放在</body>标签之前，避免脚本在DOM渲染前执行。

4. CDN资源加载异常 #

• 替换为更稳定的CDN路径：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/styles/github-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/highlight.js@11.8.0/build/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.6/dist/highlightjs-copy.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlightjs-copy@1.0.6/dist/highlightjs-copy.min.css" />

• 打开浏览器开发者工具Network标签，检查生产环境下这些资源的HTTP状态码，确保状态码为200（加载成功）。

5. Laravel资源编译问题 #

若使用Laravel Mix，重新编译生产环境资源：

npm run prod

确保所有依赖正确打包，避免版本控制导致的资源引用冲突。

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