如何实现CSS模板自动更新？浏览器缓存引发的Flask配置问题

这是浏览器缓存静态资源导致的，和Flask的模板自动重载机制无关，以下是几种可行的解决方式：

1. 手动添加版本参数到CSS引用 #

在HTML模板的CSS引用末尾加上版本号或自定义参数，比如：

<link rel="stylesheet" href="{{ url_for('static', filename='style.css?v=2') }}">

每次修改CSS后更新v的值，浏览器会因为URL变化重新加载文件，不会复用缓存内容。

2. 自动生成基于文件修改时间的URL #

利用Python的文件修改时间作为动态参数，让URL随文件更新自动变化：
首先在Flask代码中添加模板上下文处理器：

import os
from flask import Flask, url_for

app = Flask(__name__)
app.config["TEMPLATES_AUTO_RELOAD"] = True

@app.context_processor
def inject_static_url():
    def static_url(filename):
        path = os.path.join(app.static_folder, filename)
        # 获取文件最后修改时间并转为整数
        mtime = int(os.path.getmtime(path))
        return url_for('static', filename=filename, v=mtime)
    return dict(static_url=static_url)

然后在HTML模板中调用该函数引用CSS：

<link rel="stylesheet" href="{{ static_url('style.css') }}">

这样每次修改CSS文件，生成的URL会自动带上最新的修改时间戳，浏览器会主动请求新文件。

3. 配置静态文件的缓存响应头 #

在Flask中拦截静态文件请求，设置强制不缓存的响应头：

from flask import send_from_directory

@app.route('/static/<path:filename>')
def static_files(filename):
    response = send_from_directory(app.static_folder, filename)
    response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
    response.headers["Pragma"] = "no-cache"
    response.headers["Expires"] = "0"
    return response

该方法会强制浏览器每次都请求最新的静态资源，适合开发环境使用。

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