Flask同目录下CSS与JS文件无法加载问题求助

1. 修正HTML中静态资源的引用路径 #

Flask即使将static_folder设为当前目录，默认仍会通过/static/前缀匹配静态资源请求。如果你的HTML中直接使用相对路径（如<link rel="stylesheet" href="index.css">），浏览器会向http://localhost:5000/index.css发送请求，但Flask没有对应路由，导致404。

正确做法是使用Flask的url_for生成静态资源路径：

<link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
<script src="{{ url_for('static', filename='final.js') }}"></script>

这样会生成/static/index.css和/static/final.js的路径，Flask会从你设置的当前目录中读取这些文件。

2. 自定义静态资源路由（可选，无需/static前缀） #

如果不想使用/static前缀，可以添加一个通用静态资源路由，放在所有业务路由之后：

from flask import send_from_directory

@app.route('/<path:filename>')
def serve_static(filename):
    return send_from_directory('.', filename)

此路由会匹配所有未被其他路由处理的文件请求，直接返回当前目录下对应的文件。

3. 检查Linux系统下的文件权限 #

Linux系统中文件权限不足会导致Flask无法读取静态资源：

• 执行ls -l查看文件权限，确保index.css和final.js的权限包含其他用户可读（如权限为-rw-r--r--）。
• 权限不足时，执行chmod 644 index.css final.js修改权限，赋予所有用户读权限。
• 若使用sudo启动Flask，需确认root用户对这些文件有读权限。

4. 验证配置与排查请求 #

• 在Python代码中打印配置信息，确认静态资源路径设置正确：

  print("Static Folder:", app.static_folder)
  print("Static URL Path:", app.static_url_path)
  

• 打开浏览器开发者工具（F12）的「网络」面板，查看CSS/JS请求的状态码：
  • 404：路径错误，回到步骤1修正引用；
  • 403：权限问题，执行步骤3调整权限；
  • 200但资源内容不对：清除浏览器缓存（Ctrl+Shift+R）重新加载。

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