jquery - Laravel 7.x Uncaught ReferenceError: $ is not defined

Question

我正在使用 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？

Answer 1

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

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

Answer 2

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

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

Answer 3

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

欢迎.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();
 

测试.js

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