Laravel 5.5 ReferenceError：$未定义 [英] Laravel 5.5 ReferenceError: $ is not defined
问题描述
由于某些原因，我的jQuery拒绝加载。我收到错误：
For some reason my jQuery refuses to load. I am getting an error:
ReferenceError：$未定义
ReferenceError: $ is not defined
我的模板在 views / layouts / editor.blade.php 中，我在我的模板头部加载jQuery
My template is in views/layouts/editor.blade.php and I am loading jQuery in the head of my template like this
<script src="{{ asset('js/jquery.min.js') }}"></script>
我可以看到jQuery已加载到我的控制台中。但我仍然得到错误。
I can see that jQuery is loaded in my console. but still I get the error.
我正在使用laravel mix编译我的javascript，我的webpack.mix.js文件如下所示：
I am compiling my javascript using laravel mix and my webpack.mix.js file looks like this:
// 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');
为什么会发生这种情况？
Why is this happening?
编辑：
我的模板文件如下所示：
My template file looks like this:
<!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>
如果我查看我的控制台，我会看到以下内容
If I look in my console I see the following
如果我在新标签页中打开jquery.min.js文件，我会看到以下内容：
If I open the jquery.min.js file in a new tab I see the following:
所以在所有webpack样板下面都是jquery那些东西。
So it's jquery underneath all that webpack boilerplate stuff.
我还运行 npm run production ，它删除了所有的webpack内容并留下原始jquery。
I have also run npm run production which removes all that webpack stuff and leaves the raw jquery.
推荐答案
试试这个。
在您的视图文件中创建内容部分下的部分
Try this. In your view file create a section under content section
@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'）。
所以它看起来像
Then @yield('scripts') just under the @yield('content') in your template file. So its looks like
<body>
@yield('content')
<!-- Scripts -->
@yield('scripts')
</body>
这篇关于Laravel 5.5 ReferenceError：$未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
