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

Question

我无法让 Flask 运行我的 css 和 js 文件。它只是打开一个页面，其中所有图像都丢失，所有文本字段和按钮等都遍布各处。所以我发现相关文件需要位于 static 文件夹中，并且必须相应地调整路径，例如Flask Web App 的 CSS Problems或在Flask 上运行时未添加外部 JavaScript 文件。我实现了这个。但这并没有真正帮助。显然这是一个常见问题。我已经尝试了一些其他建议/解决方案，主要集中在 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()

运行烧瓶后，我得到以下输出：

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')}}">

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

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

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