Laravel 5.5 ReferenceError：$未定义

Question

出于某种原因，我的jQuery拒绝加载。我收到一个错误：

ReferenceError：$未定义

我的模板在views/layouts/editor.blade.php，我正在我的模板的头部加载jQuery

<script src="{{ asset('js/jquery.min.js') }}"></script>

我可以看到jQuery已加载到我的控制台中。但我仍然得到错误。

我正在使用laravel mix编译我的javascript，我的webpack.mix.js文件如下所示：

// javascript
mix.js('resources/assets/js/app.js', 'public/js')
   .js('node_modules/jquery/dist/jquery.min.js', 'public/js')
   .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
    });
// css
mix.sass('resources/assets/sass/app.scss', 'public/css')
   .sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');

为什么会这样？

编辑：

我的模板文件如下所示：

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <!-- Styles -->
        <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <!-- scripts -->
        <script src="{{ asset('js/jquery.min.js') }}"></script>

        <script>
            $(function(){
                alert();
            });
        </script>

    </head>
    <body>


        @yield('content')

        <!-- Scripts -->

        <script src="{{ asset('js/app.js') }}"></script>

    </body>
</html>

如果我查看我的控制台，我会看到以下内容

如果我在新选项卡中打开jquery.min.js文件，我会看到以下内容：

所以在所有webpack样板文件下面都是jquery。

我还运行npm run production，删除所有webpack的东西，并留下原始的jquery。

Answer 1

试试这个。在视图文件中，在内容部分下创建一个部分

@section('scripts')

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
       $(function(){
            alert();
        });
</script>
<script src="{{ asset('js/app.js') }}"></script>

@endsection

然后@yield（'scripts'）位于模板文件中的@yield（'content'）下面。所以看起来像

    <body>

        @yield('content')

        <!-- Scripts -->

       @yield('scripts')

    </body>

Answer 2

使用mix.combine（）代替mix.js（）：

mix.combine([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
],'public/js/outputFile.js');

Answer 3

问题是我从node_modules / jquery / dist文件夹而不是/ src文件夹编译我的jquery。

Laravel 5.5 ReferenceError：$未定义

问题描述投票：1回答：3

3个回答

最新问题

Laravel 5.5 ReferenceError：$未定义

问题描述 投票：1回答：3

3个回答

最新问题

问题描述投票：1回答：3