包括 Bootstrap 4 & JQuery 只能通过 CDN 起作用，不能通过包括本地 .js 文件起作用。为什么？

Question

我的代码如下。我只是按照下面指定的方式从网站复制并粘贴模式，以证明它仅在通过 CDN 添加 .js 文件时有效。

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Bootstrap required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- load my css styles -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='mine.css') }}">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='bootstrap_4.1.1.min.css') }}">
</head>
<body>
    <header class="site-header">
        ....
    </header>

    <main role="main" class="container">
        .....
    </main>

    <!-- Copy paste modal from official website @ https://getbootstrap.com/docs/4.0/components/modal/#live-demo -->
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
        Launch demo modal
    </button>

    <button type="button" class="swal">
        swal
    </button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">

                    <button type="button" class="swal">
                        swal
                    </button>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>


    <!-- jQuery first, then Popper.js, then Bootstrap JS -->

    <!-- This works -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <!-- This doesn't work
    <script type="text/javascript" href="{{ url_for('static',filename='libs/jquery-3.2.1.min.js') }}"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
            crossorigin="anonymous"></script>
    <script type="text/javascript" href="{{ url_for('static',filename='libs/bootstrap_4.1.1.min.js') }}"></script>
    -->
</body>
</html>

为什么在本地包含 javascript 文件不起作用？我已经确认它是 static 文件夹中的正确路径，正如预期的那样。我宁愿包含本地文件而不是依赖 CDN。为什么会发生这种情况，我该如何解决？我错过了什么。

ps。我试过包含原始路径（没有 url_for()），结果相同。

Answer 1

它不起作用的原因是您试图在 <script> 标签上使用 href 属性。

如您所见，<-- This doesn't work 行下方的 <script> 标签中的 3 个标签中有 2 个使用 href 而不是 src 属性，只要更改它即可因为路径是正确的，所以应该可以正常工作。

包括 Bootstrap 4 & JQuery 只能通过 CDN 起作用，不能通过包括本地 .js 文件起作用。为什么？

Including Bootstrap 4 & JQuery only works via CDN, not by including local .js files. Why?

python

flask

flask-wtforms

bootstrap-modal

bootstrap-4