Flask路由切换后CSS样式丢失问题求助

问题根源 #

你HTML中静态资源使用相对路径（如static/xxx），在根路由/下浏览器会解析为/static/xxx，但在/signature/xxx-xxx这类嵌套路由下，浏览器会把静态资源路径拼接为/signature/static/xxx，导致404错误。另外你的HTML里还有个拼写错误：ststic应该改成static。

解决方法 #

方法1：使用Flask内置的url_for生成绝对路径（推荐）

Flask的url_for可以自动生成静态资源的正确URL，不管当前路由层级如何。修改HTML中的资源引用：

<head>
    <!-- ... 其他meta标签 ... -->
    <!-- Icons font CSS-->
    <link href="{{ url_for('static', filename='vendor/mdi-font/css/material-design-iconic-font.min.css') }}" rel="stylesheet" media="all">
    <link href="{{ url_for('static', filename='vendor/font-awesome-4.7/css/font-awesome.min.css') }}" rel="stylesheet" media="all">
    <!-- Vendor CSS-->
    <link href="{{ url_for('static', filename='vendor/select2/select2.min.css') }}" rel="stylesheet" media="all">
    <link href="{{ url_for('static', filename='vendor/datepicker/daterangepicker.css') }}" rel="stylesheet" media="all">
    <!-- Main CSS-->
    <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet" media="all">
</head>

方法2：改用根相对路径（加斜杠前缀）

直接在静态资源路径前加/，强制浏览器从网站根目录加载资源：

<head>
    <!-- ... 其他meta标签 ... -->
    <!-- Icons font CSS-->
    <link href="/static/vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all">
    <link href="/static/vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all">
    <!-- Vendor CSS-->
    <link href="/static/vendor/select2/select2.min.css" rel="stylesheet" media="all">
    <link href="/static/vendor/datepicker/daterangepicker.css" rel="stylesheet" media="all">
    <!-- Main CSS-->
    <link href="/static/css/main.css" rel="stylesheet" media="all">
</head>

额外优化建议 #

你的路由定义里包含空格：@app.route('/signature/<email> - <pronouns>')，这会导致URL中出现%20（空格的URL编码），建议修改为无空格的格式，比如：

@app.route('/signature/<email>-<pronouns>')

这样生成的URL会更规范，避免潜在的解析问题。

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