Laravel 7.x Uncaught ReferenceError: $ is not defined答案

【问题标题】：Laravel 7.x Uncaught ReferenceError: $ is not definedLaravel 7.x Uncaught ReferenceError: $ is not defined
【发布时间】：2020-10-13 01:19:56
【问题描述】：

我使用的是 Larave 7.x 版本。为了测试 JQuery，我将以下代码放在了欢迎中 body 标记的末尾

<script type="text/javascript">
    $(document).ready(function () {
        alert('JQuery is ready!');
    });
</script>

它会抛出以下错误...

Uncaught ReferenceError: $ is not defined at ...

然后我从脚本中删除了deffer。

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

现在 JQuery 好了。但是它会抛出以下错误...

[Vue 警告]：找不到元素：#app

问题是，我可以使用 JQuery 或 Vue 但不能同时使用两者。

有没有办法同时使用JQuery和Vue？

【问题讨论】：

如果你使用 vue，jQuery 应该不是必需的或不可取的。在 JavaScript 中坚持一种一致的做事方式

标签： jquery vue.js laravel-7.x

【解决方案1】：

我找到了这样的解决方案...

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Your jquery code            
        alert('JQuery is ready!');            
    });
</script>

【讨论】：

JQuery is ready... 除了这都是标准的 JavaScript，这里没有 jQuery。

【解决方案2】：

我遇到了完全相同的问题，我的解决方案是使用 jQuery 的代码创建一个新的 js 文件（test.js），添加到 webpack.mix.js 中，然后在 welcome.blade.php 上导入：

welcome.blade.php

<header
    <script src="{{ mix('js/app.js') }}" defer></script>
    <script src="{{ mix('js/test.js') }}" defer></script>
</header

webpack.mix.blade

mix.js('resources/js/app.js', 'public/js')
    .js("resources/js/test.js", "public/js")
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

test.js

$(() => {
    alert('JQuery is ready!');
})

【讨论】：

【解决方案3】：

我遇到了同样的错误，但是将此行添加到您的 app.js 应该可以解决它：

window.$ = window.jQuery = require('jquery');

【讨论】：