烧瓶网络应用程序（使用烧瓶服务水疗网站），找不到脚本答案

【问题标题】：Flask web app (using flask to serve a spa website), script not found烧瓶网络应用程序（使用烧瓶服务水疗网站），找不到脚本
【发布时间】：2020-06-15 18:41:01
【问题描述】：

我对flask中的pycharm（调试）服务器的工作方式一定有误解。由于似乎没有加载一个非常简单的网页。

我希望通过烧瓶来提供文件（即使它们主要是静态文件），因为它允许我在同一个地方拥有更多的控制权。

flask 应用程序如下所示：

import flask
from flask import Flask, request, render_template
import os

app = Flask(__name__, static_folder="")


@app.route('/', methods=['GET', 'POST'])
def login():
    m = request.method
    d = request.values
    SITE_ROOT = os.path.realpath(os.path.dirname(__file__))
    u = os.path.join(SITE_ROOT, "index.html")
    r = flask.make_response()
    return flask.send_file(u)

这只是在项目的根文件夹下。 index.js 也放在项目的根目录下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <!--<link rel="stylesheet" href="styles/styles.css">-->
  </head>

  <body aurelia-app="rel/main">
    <script src="/testit.js"></script>
  </body>
</html>

（请注意，它大多被注释掉以简化事情，我已经离开了 cmets，以便人们可以看到最终目标）。

文件“testit.js”也存在于根目录下，内容如下：

console.log('in testit.js');

现在，当我运行“index.js”时，它工作正常，pycharm 显示页面并且该行按预期记录。运行服务器时出现问题：服务器确实显示了网页（通过检查源可以看到）。然而，chrome 中的开发者工具会在“testit.js”文件中出现“404 not found”错误。

那么发生了什么，我确定该文件在那里？我真的不想在开发时仅仅为了测试目的而设置一个 nginx 服务器。我也不想过多地触及文档结构（这是一个复杂的结构，system.js 依赖于在几个不同的文件夹中查找库）。

虽然与问题没有直接关系，但文档结构现在看起来像：

/
dist/
    rel/
       ... javascript SPA files, refered to by config.js in release
    debug/
       ... javascript SPA files, refered to by config.js in debug
    test/
       ... javascript SPA files, refered to by config.js during unit tests
jspm_packages/
    github/
    npm/
node_modules/
src/
   ... typescript SPA files compiled to dist/ by build tool
index.html
testit.js
config.js
app.py <-- main application file

在 Klaus D 的推荐下，我尝试关注Documentation for static files。我似乎无法理解这有什么帮助。 flask.url_for('static', 'index.html') 只提供一个文件路径。所以直接响应实际上不会显示文件。 - 打开它并没有什么不同（或者在我的情况下甚至无法正常工作，因为文件路径包含前导斜杠）。

from functools import lru_cache
import flask
from flask import Flask, request, render_template
import os

app = Flask(__name__, static_folder="")


@app.route('/', methods=['GET', 'POST'])
def login():
    print("oh")
    u = flask.url_for('static', filename="index.html")
    r = flask.make_response(u)
    return flask.send_file(u)

显示服务器错误并且 pycharm 的日志显示“FileNotFoundError: [Errno 2] No such file or directory: '/index.html'”（通过 send_file 使用 'index.html' 时文件正在服务器中）

当我返回“r”并期望烧瓶魔法创建一个完整页面时，浏览器会显示简单的“/index.html”作为响应。（所以不是文件本身，只是文件路径）。

【问题讨论】：

在文档中有一个关于如何提供静态文件的部分：flask.pocoo.org/docs/0.12/quickstart/#static-files
@KlausD。这并不重要，html 的服务是正确的。 - 只是html不能引用脚本文件（脚本文件没有被加载）。
这很重要。试试看！
@KlausD。感谢您跟上，但正如我在编辑中看到的那样，它并没有真正帮助。 - 或者我完全误解了 API 文档。
@SaidbakR 呃，那些行被注释掉了。 - 我现在已将它们从帖子中删除以防止混淆。（为了更明确地在testit.js 前面添加斜线，这两种方式都不起作用）。

标签： javascript python flask single-page-application

【解决方案1】：

以防万一有人正在寻找如何做到这一点：

https://flask.palletsprojects.com/en/1.1.x/patterns/singlepageapplications/

这是建议的代码：

from flask import Flask, jsonify

app = Flask(__name__, static_folder='app', static_url_path="/app")


@app.route("/heartbeat")
def heartbeat():
    return jsonify({"status": "healthy"})


@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return app.send_static_file("index.html")

例如，如果您使用标准 vue-setup（构建到 dist 文件夹），您应该将第二行更改如下：

app = Flask(__name__, static_folder="dist", static_url_path="/")

【讨论】：