如何在Flask中完整托管目录所有文件并默认访问index.html？

项目结构 #

- app.py // Flask服务器
- static/
  - index.html
  - subfolder/
    - index.html
    - main.js

之前的尝试与问题 #

1. 仅能加载根目录index.html的实现：

@app.route('/')
def index():
    return send_from_directory(os.getcwd() + "/static", "index.html")

问题：无法访问子目录中的文件或页面。

2. 匹配任意路径的实现：

@app.route('/<path:path>')
def index(path):
    return send_from_directory(os.getcwd() + "/static", path)

问题：访问目录时必须显式添加index.html后缀，无法自动识别目录默认页。

3. 带默认值的路由实现：

@app.route('/<path:path>', defaults={'path': 'index.html'})
def index(path):
    print(f"looking in: {os.getcwd()}/static{path}")
    return send_from_directory(os.getcwd() + "/static", path)

问题：子目录无法正常访问，始终指向根目录的index.html；即使显式访问subfolder/index.html，页面中的main.js会加载失败，报错：Uncaught SyntaxError: Unexpected token '<' (at main.js:1:1)——这是因为浏览器请求的/main.js实际返回的是HTML内容（路由匹配错误），而非JS文件。

subfolder/index.html内容：

<head>
<script src="main.js"></script>
</head>
<body>
<h1>henlo</h1>
</body>

main.js内容：

console.log("hello")

正确实现方案 #

要完整托管静态目录，需要实现两个核心逻辑：

• 当访问的路径是目录时，自动返回该目录下的index.html
• 正确处理静态资源的路径匹配，避免资源请求错误

代码实现 #

import os
from flask import Flask, send_from_directory, abort

app = Flask(__name__)
static_dir = os.path.join(os.getcwd(), 'static')

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve_static(path):
    # 构造完整的文件/目录路径
    full_path = os.path.join(static_dir, path)
    
    # 如果路径是目录，尝试返回目录下的index.html
    if os.path.isdir(full_path):
        full_path = os.path.join(full_path, 'index.html')
    
    # 检查文件是否存在，不存在则返回404
    if not os.path.exists(full_path):
        abort(404)
    
    # 拆分路径，正确返回对应文件
    if os.path.isdir(os.path.join(static_dir, path)):
        return send_from_directory(static_dir, os.path.join(path, 'index.html'))
    else:
        return send_from_directory(static_dir, path)

资源路径修正 #

对于HTML中的静态资源引用，建议使用绝对路径或者Flask内置的url_for函数生成正确路径，避免相对路径导致的请求错误：

• url_for是Flask内置函数，用于生成路由URL，在模板中可直接使用。修改subfolder/index.html的JS引用：

<head>
<script src="{{ url_for('static', filename='subfolder/main.js') }}"></script>
</head>
<body>
<h1>henlo</h1>
</body>

如果不想使用模板引擎，也可以直接写绝对路径：

<script src="/static/subfolder/main.js"></script>

关于Flask静态文件的说明 #

Flask默认会将static目录下的资源映射到/static路径下，比如static/subfolder/main.js可通过/static/subfolder/main.js直接访问。如果想要让网站根路径直接对应静态目录（访问/对应static/index.html，/subfolder对应static/subfolder/index.html），就需要上面的自定义路由实现。

内容的提问来源于stack exchange，提问作者Null Salad