Flask带路径参数或子路径的路由导致静态资源引用失效如何解决?

问题原因 #

你这个问题是静态资源引用使用了相对路径导致的：

• 当页面路由为/orders时，浏览器会认为当前页面的父级路径是站点根路径/，相对路径static/xxx会被解析为/static/xxx，和实际路径匹配，所以加载正常。
• 当页面路由为多层路径/orders/<orderid>时，浏览器会认为当前页面的父级路径是/orders/，相对路径static/xxx会被自动拼接为/orders/static/xxx，和你实际的静态资源路径不符，所以返回404错误。

修复方案 #

有两种常用的解决方案，任选其一即可：

方案1：使用Flask内置的url_for函数生成静态资源路径（推荐） #

所有模板中对静态资源的引用都通过url_for('static', filename='资源相对static目录的路径')生成，Flask会自动输出正确的绝对路径，不受路由层级影响。如果后续你的应用需要部署到站点子路径下，该方法会自动适配路径前缀，兼容性更好。
示例：

1. 引用CSS/JS文件：

<!-- 原来的错误写法 -->
<link rel="stylesheet" href="static/assets/css/main.css">
<!-- 修改后的写法 -->
<link rel="stylesheet" href="{{ url_for('static', filename='assets/css/main.css') }}">

2. 如果是CSS文件内部引用字体、图片等资源，直接写绝对路径即可：

@font-face {
  font-family: 'themify';
  /* 直接以/开头写完整路径 */
  src: url('/static/assets/static/fonts/icons/themify/themify.ttf') format('truetype');
}

方案2：添加base标签固定相对路径基准 #

如果不想修改所有静态资源引用，可以直接在HTML模板的<head>标签内添加一行base标签，指定所有相对路径的解析基准为站点根路径：

<head>
  <base href="/">
  <!-- 其他原有head内容不用修改 -->
</head>

添加后所有原有相对路径的静态资源引用都会自动以/为基准拼接路径，不会再出现多拼路由前缀的问题。

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