如何解决远程服务器上Laravel应用报ReferenceError: $ is not defined错误

数据老陈

2026-10-4

问题根因

你遇到的ReferenceError: $ is not defined错误是自定义jQuery代码执行时，jQuery还未完成加载挂载导致的，本地环境正常是因为本地资源加载速度快、触发了异步加载的时序巧合，生产环境加载逻辑更严格所以暴露了问题。

排查&修复步骤

首先修正Blade模板的脚本位置错误：你当前的自定义jQuery代码写在了所有@section区块之外，这部分代码会在Blade渲染时直接输出到HTML中jQuery加载位置之前，而你的jQuery是打包在bootstrap.js中、统一放在includes.basic_footer里加载的，脚本执行顺序完全颠倒。
把自定义脚本挪到footer区块内公共footer引入之后即可，同时可以加DOM就绪包裹避免DOM未加载完成就执行代码：

@section('footer')
    @include('includes.basic_footer')
    <!-- 引入依赖jQuery的工具脚本 -->
    <script src="{{ url('js/cropimage.js') }}" ></script>
    <!-- 自定义jQuery代码 -->
    <script>
    $(document).ready(function(){
        $( 'button' ).click(function(){
           $( '#file_picture_input' ).click(); 
        });

        $( '#file_picture_input').change(function(){
           $( 'span' ).text($( this ).val() ); 
        });
    })
    </script>
@stop

检查生产环境前端资源是否正确编译：
部署到生产环境前必须执行npm run production重新打包前端资源，确保你在bootstrap.js中引入的jQuery被正确打包到最终的产物中。如果漏了编译步骤，生产环境的js文件里没有jQuery代码也会触发该错误。
验证资源加载顺序：上线后打开浏览器调试器的网络面板，确认打包后的js文件（通常是public/js/app.js）加载完成后，你的自定义脚本才执行。