javascript - 如何让 Flask 识别静态文件夹中的 CSS 和 JS 文件？

Question

我无法让 flask 运行我的 css 和 js 文件。它只是打开一个页面，其中所有图像都丢失了，所有文本字段和按钮等都到处都是。所以我发现相关文件需要放在静态文件夹中，并且必须相应地调整路径，如CSS Problems with Flask Web App。或在 External JavaScript file is not getting added when running on Flask .我实现了这个。但这并没有真正的帮助。显然这是一个普遍的问题。我尝试了其他一些建议/解决方案，主要集中在 stackoverflow 上的 snytax 和括号等，但没有帮助。所以我的文件夹结构是这样的:

  /myproject
      /static
         /css_image
            script.js
            img1.png
            asdf.css
      /templates
         index.html
      app.py

以下是上述路径的 HTML 代码中的几行:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">
<link rel="apple-touch-icon" sizes="57x57" href="{{ url_for('static', filename='css_image/img1.png')}}">
<script  src="{{ url_for('static', filename='css_image/script.js')}}" data-turbolinks-track="reload"></script>

我的 python-flask 代码如下所示:

from flask import Flask, url_for, render_template

app = Flask(__name__)


@app.route('/')
def index():
    return render_template("index.html")

if __name__ == '__main__':
    app.run()

运行 flask 后，我在输出中得到以下内容:

127.0.0.1 - - [07/Oct/2019 14:10:06] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/img1.png HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/asdf.css HTTP/1.1" 404 -
127.0.0.1 - - [07/Oct/2019 14:10:06] "GET /static/css_image/script.js HTTP/1.1" 404 -

我还应该补充一点，当我通过单击文件直接打开它时，html 文件工作正常。

Answer 1

当您将 html 指向静态文件时，您必须给出从静态目录根目录开始的路径:

<link rel="stylesheet" media="all" href="{{ url_for('static', filename='css_image/asdf.css')}}">

也就是说，这不是您唯一的问题，因为找不到一些具有正确路径的静态文件。

当您在创建应用程序时提供静态文件的路径时会发生什么？ 即:

app = Flask(__name__,
            static_folder='static',
            template_folder='templates')

[编辑]:有两件事你没有提到:你的 python 文件的名称是什么，它在你的结构中的什么位置？我复制粘贴了您的代码，它工作正常，此日志证明了这一点:

 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/asdf.css HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/script.js HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /static/css_image/img1.png HTTP/1.1" 200 -
127.0.0.1 - - [07/Oct/2019 17:20:32] "GET /favicon.ico HTTP/1.1" 404 -

目录结构:

app.py
static/
    css_image/
        asdf.css  
        img1.png
        script.js
templates/
    index.html