Flask关联CSS/JS时出现404错误的技术求助

你遇到的问题核心是相对路径解析逻辑和Flask路由层级不匹配：当你用../static/script.js这种相对路径时，浏览器会根据当前页面的URL（比如/subjects/physics/105）去拼接路径，最终请求的是/subjects/static/script.js，而不是Flask默认的根目录下的/static/script.js，所以返回404。

不需要修改路由路径，直接用Flask模板内置的url_for函数就能彻底解决这个问题，它会自动生成基于网站根目录的绝对路径，适配任何路由层级。

解决步骤 #

1. 修改HTML中的静态资源引用
   把原来的相对路径替换成url_for('static', filename='资源路径')的形式：

<!-- 替换原来的script引用 -->
<script src="{{ url_for('static', filename='script.js') }}"></script>
<!-- 如果要引入xdPlayer下的player.js -->
<script src="{{ url_for('static', filename='xdPlayer/player.js') }}"></script>

2. 确认项目结构符合Flask规范
   确保静态资源都放在项目根目录的static文件夹下，结构示例：

你的项目/
├── app.py
├── templates/
│   ├── LO.html
│   └── layout.html
└── static/
    ├── script.js
    └── xdPlayer/
        └── player.js

原理说明 #

url_for('static', filename='xxx')会生成类似/static/script.js的绝对路径，浏览器会直接从网站根目录请求资源，完全不受当前页面路由层级影响，不管你的路由是/subjects/<subject>/<LO_id>还是其他复杂路径，都能正确加载静态资源。

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