在 Laravel 中使用时，fullcalendar 不是一个函数答案

【问题标题】：fullcalendar is not a function while using in Laravel在 Laravel 中使用时，fullcalendar 不是一个函数
【发布时间】：2019-01-29 16:53:13
【问题描述】：

我正在尝试在我的 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>

script.js中的代码

$(function() {
    $('#calendar').fullCalendar({
      editable: true,
      eventLimit: true,
    });
});

我的页面中有#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

我的刀片文件

<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>

正如@Leo 建议的那样，我尝试将https 用于我正在使用的资源的URL，并且还使用ngrok 在localhost 中创建https，但我仍然遇到同样的错误。

【问题讨论】：

我会尝试看看是否找到其他解决方案，同时在提供错误信息之前删除答案。
@Leo 我认为您不需要删除您的答案，这可能是某些人的解决方案。
@PrafullaKumarSahu 您是否只是尝试移动“head”标签中的脚本？
yeee，终于：D
@Leo 检查我刚刚更新了我的答案。

标签： javascript jquery html laravel-5 fullcalendar

【解决方案1】：

我发现问题是 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>

【讨论】：

Laravel 原生代码不太可能有错误。
@GiamPy，我不这么认为，它是关于维护依赖关系。