Flask中使用send_from_directory时，如何统一HTML静态资源访问路径？

问题根源 #

核心矛盾是相对路径的基准URL不一致：

• 直接访问根路由/时，页面基准URL为域名根目录（如http://localhost:5000/），相对路径static/styles/style.css会被解析为http://localhost:5000/static/styles/style.css，能正常加载资源。
• 通过/login路由访问时，页面基准URL变为http://localhost:5000/login/，相同的相对路径会被解析为http://localhost:5000/login/static/styles/style.css，自然找不到资源。

解决方案 #

方案1：使用绝对路径（最简单直接）

直接把HTML中的资源引用改成以/开头的绝对路径，强制从域名根目录开始查找资源，不受当前路由影响：

<!-- 替换CSS引用 -->
<link rel="stylesheet" href="/static/styles/style.css">
<!-- 替换JS引用 -->
<script src="/static/script/core.js"></script>
<!-- 页面跳转链接也建议用绝对路径 -->
<a href="/login">前往登录页</a>

这种方式无需修改Flask代码，仅调整HTML即可解决问题。

方案2：用Flask的url_for生成规范路径（符合Flask最佳实践）

推荐改用Flask原生的render_template配合url_for自动生成正确路径，替代send_from_directory：

1. 修改views.py代码：

from flask import Blueprint, render_template

views = Blueprint("views", __name__, static_folder="static", template_folder="static")

@views.route("/")
def home():
    return render_template("index.html")

@views.route("/login")
def login():
    return render_template("login.html")

2. 在HTML文件中使用url_for语法生成资源和跳转路径：

<link rel="stylesheet" href="{{ url_for('static', filename='styles/style.css') }}">
<script src="{{ url_for('static', filename='script/core.js') }}"></script>
<a href="{{ url_for('views.login') }}">前往登录页</a>

url_for会根据Flask配置自动生成绝对路径，无论当前处于哪个路由，都能精准指向静态资源。

方案3：调整项目结构（适合不想修改HTML的场景）

如果不想改动HTML中的路径，可以将HTML文件移到独立的templates目录，统一静态资源的相对路径基准：

1. 调整后的项目结构：

- website
   - app.py
   - views.py
   - templates/
       - index.html
       - login.html
   - static/
       - styles/style.css
       - script/core.js

2. 修改views.py：

from flask import Blueprint, render_template

views = Blueprint("views", __name__, static_folder="static", template_folder="templates")

@views.route("/")
def home():
    return render_template("index.html")

@views.route("/login")
def login():
    return render_template("login.html")

此时HTML中可使用相对路径../static/styles/style.css，但这种方式可靠性不如前两种，建议优先选择方案1或2。

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