Javascript fullcalendar在Laravel中使用时不是函数

我正在尝试在我的laravel应用程序中使用fullcalendar

网页源代码中的脚本

    <script src="http://127.0.0.1:8000/js/vendors/moment.js"></script>
    <script src="http://127.0.0.1:8000/js/vendors/jquery.min.js"></script>
    <script src="http://127.0.0.1:8000/js/vendors/fullcalendar.min.js"></script>
    <script src="http://127.0.0.1:8000/js/script.js"></script>
</body>
</html>

我的页面中有#calendar div，我的控制台显示错误

Uncaught TypeError: $(...).fullCalendar is not a function
    at HTMLDocument.<anonymous> (script.js:2)
    at l (jquery.min.js:2)
    at c (jquery.min.js:2)
(anonymous) @ script.js:2
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
w.readyException @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
l @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
c @ jquery.min.js:2
setTimeout (async)
(anonymous) @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
fire @ jquery.min.js:2
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
_ @ jquery.min.js:2

UncaughtTypeError:$（…）。fullCalendar不是函数
在HTMLDocument。


仪表板

---

正如@Leo所建议的，我尝试对我正在使用的资源使用

https

url，也使用

ngrok

在

localhost

中创建

https

，但仍然得到了相同的错误。

我发现问题是Laravels app.js，这是创建错误的原因，我将为它添加一个适当的解决方案

如果您将使用

npm

和

webpack

并管理依赖项，则不会出现此错误。无需使用依赖项管理器

另一个解决方案是使用延迟

您可以在所有其他脚本上使用defer属性，错误就消失了

<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/vendors/moment.js') }}" defer></script>
<script src="{{ asset('js/vendors/fullcalendar.min.js') }}" defer></script>-->
<script src="{{ asset('js/script.js') }}" defer></script>

-->

我将尝试寻找其他解决方案，同时在给出错误信息之前删除答案。@Leo我认为您不需要删除答案，可能这对某些人来说是一个解决方案。@PrafullaKumarSahu您只是尝试移动“head”标记中的脚本吗？Yee，最后：D@Leo检查我刚刚更新了答案。Laravel本机代码不太可能有错误。@GiamPy，我不这么认为，这是关于维护依赖关系的。

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">Menu</div>
                <div class="card-body">
                    <ul class="nav flex-column">
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('calendar') }}">Calendar</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Dashboard</div>

                <div class="card-body full-calendar">
                    <div id='calendar'></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="{{ asset('js/app.js') }}" defer></script>
<script src="{{ asset('js/vendors/moment.js') }}" defer></script>
<script src="{{ asset('js/vendors/fullcalendar.min.js') }}" defer></script>-->
<script src="{{ asset('js/script.js') }}" defer></script>