Laravel 5.5 ReferenceError：$ 未定义
Posted
技术标签:
【中文标题】Laravel 5.5 ReferenceError：$ 未定义【英文标题】：Laravel 5.5 ReferenceError: $ is not defined 【发布时间】：2018-04-06 22:24:06 【问题描述】：由于某种原因，我的 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。
【问题讨论】：
试过window.$ ?
对不起乔纳森，我不太明白！
"I can see that jQuery is loaded in my console. but still I get the error." - 您在浏览器的调试工具中还能看到什么？如果您在该行放置一个断点，is $ 在那里定义？您的 jQuery 库是否以某种方式损坏？您是否在尝试使用 jQuery 之后加载它？将其加载到不同或更狭窄的范围内？错误就是它...... $ 未定义。您能否提供一个完整但最小的示例来演示该问题并说明为什么在该示例中应该定义它？
我不知道autoload 方法的作用。我假设它将 jquery 绑定到变量。根据您使用 jQuery 的方式，也许您也想尝试将其绑定到 window，例如 window.jQuery。
我已经更新了我的帖子，提供了更多细节。
【参考方案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>
【讨论】：
我有在我的标题中加载 jquery 资产/CDN 的脚本标签。在布局中添加“部分”并在模板中添加“产量”就可以了。【参考方案2】：问题是我从 node_modules/jquery/dist 文件夹而不是 /src 文件夹编译我的 jquery。
【讨论】：
【参考方案3】：使用 mix.combine() 代替 mix.js() ：
mix.combine([
'node_modules/jquery/dist/jquery.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js'
],'public/js/outputFile.js');
【讨论】：
这个答案帮助了我，谢谢！但我不确定 mix.combine() 和 mix.js() 之间有什么区别。我似乎在 Laravel 文档中找不到它。你能指出我正确的方向吗？以上是关于Laravel 5.5 ReferenceError：$ 未定义的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接