使用 Flask 在 html 中引用 .js 文件的静态资源问题答案

【问题标题】：Static resource problem referencing .js file in html using Flask使用 Flask 在 html 中引用 .js 文件的静态资源问题
【发布时间】：2020-04-24 20:01:05
【问题描述】：

直接打开时，我的 html 文件将加载我的 OpenLayers JavaScript 文件（加载地图框）。但是，当我从我的 Flask python 应用程序运行 html 时，JavaScript 文件/对象不会加载（没有显示地图，只有一些标题文本）。

这个问题似乎在这里排序：

External JavaScript file is not getting added when running on Flask

但是由于我的文件夹结构，我似乎无法加载 .js。没有错误，只是没有在页面中加载地图。我想我需要一些有关“静态”参考的语法方面的帮助。我认为这是问题所在，但是我对网站建设非常陌生。这是我的项目文件夹结构：

ol_app.py
/pages
    olquickstart.html
/static
    /scripts
        ol_script.js
/libs
    /v6.3.1-dist
        ol.css
        ol.css.map
        ol.js
        ol.js.map

我的 Flask python 应用程序：

from flask import Flask, render_template
import os
import webbrowser
from threading import Timer

template_dir = os.path.abspath(r'D:\PathToProject\ol_quickstart\pages')
app = Flask(__name__, template_folder=template_dir)

#home page
@app.route('/')
def index():
    return '<a href="http://127.0.0.1:5000/ol_qs">OL QuickStart</a>'

#openlayers test page
@app.route('/ol_qs')
def ol_qs():
    return render_template("olquickstart.html")

#run app
def open_browser():
    webbrowser.open_new('http://127.0.0.1:5000/')

if __name__ == "__main__":
    Timer(1, open_browser).start();
    app.run(port=5000)

我的html：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="../libs/v6.3.1-dist/ol.css" type="text/css">
    <style>
      .map {
        height: 900px;
        width: 100%;
      }
    </style>
    <script src="../libs/v6.3.1-dist/ol.js"></script>
    <title>OpenLayers Quickstart</title>
  </head>
  <body>
    <h2>OL Quickstart Map</h2>
    <div id="js-map" class="map"></div>
    <!-- <script src='../static/scripts/ol_script.js'></script> I USE THIS LINE WHEN OPENING THE HTML DIRECTLY WITHOUT FLASK-->
    <script type="text/javascript"
        src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>
  </body>
</html>

这部分有问题吗？

<script type="text/javascript" src="{{ url_for('static', filename='scripts/ol_script.js') }}"></script>

【问题讨论】：

您的服务器可以处理 MIME 输出（来源、文件大小）吗？为此添加一个内部 File Creator 脚本，但不要链接文件对象（将重复多次）。您的服务器默认输出类型是text/html。
@dsgdfg 抱歉，我不确定我理解什么是 mime。我正在 PC 上的本地服务器上运行我的网站。
您将需要在下一个级别。谁提供静态文件和如何管理用户脚本？

标签： javascript python html css flask

【解决方案1】：

看来您需要将libs 目录移动到static 中，然后包含与您已有的具有类似url_for 功能的文件：

<link rel="stylesheet" type="text/css"
 href="{{ url_for('static', filename='libs/v6.3.1-dist/ol.css') }}">

<script type="text/javascript"
 src="{{ url_for('static', filename='libs/v6.3.1-dist/ol.js') }}"></script>

您现有的scripts/ol_script.js 看起来是正确的。

但是，如果要自行调试，您应该在 Web 浏览器中加载开发工具并查看 Network 选项卡，以确保每个 JS 文件都能成功加载并且不会出现 404。

Console 选项卡同样会显示页面中的任何 javascript 错误。

【讨论】：

感谢这项工作！你能解释一下发生了什么吗？为什么将库移入静态解决了它？此外，您在该代码块的末尾缺少一个尾随 </script> 标记。
@TheoF 简单地说，以filename arg 到url_for('static', filename='anything') 的任何内容都必须存在于static/ 目录中！