时间戳

首页 > 解决方案 > 让 Livereload + Flask 触发硬刷新

python - 让 Livereload + Flask 触发硬刷新

问题描述

在 JavaScript 世界中接触过 Svelte/Rollup 后，我印象深刻的是它可以在对源代码进行更改时自动刷新浏览器。在 Python 中寻求类似的行为，我发现了支持与 Flask 集成的包livereload（很确定使用相同的技术）。我希望刷新的结果反映对源代码的所有更改。

我正在使用带有 livereload v2.5.1 的 WSL 并通过 Chrome 查看。我可以成功地让页面在检测到的源代码更改时刷新，但刷新不会重新下载新文件，而只会显示缓存的文件。页面确实刷新了，但我需要按 Ctrl + 单击刷新才能查看实际更改。使用开发人员模式并关闭缓存可以按需要工作。使用 Svelte/Rollup 不需要禁用缓存即可查看源更改。

我的大部分更改是对从标准 Flask 项目模板中的“静态”文件夹提供并​​使用 Flask 的“render_template”函数呈现的 *.css 或 *.js 文件。

我正在启动我的 Flask 服务器，如下所示：

app = create_app()
app.debug = True
app.config['TEMPLATES_AUTO_RELOAD'] = True

server = Server(app.wsgi_app)
server.watch(filepath='static/*', ignore=lambda *_: False)
server.serve(liveport=35729, host='127.0.0.1', port=80)

我希望不必禁用缓存，以便由 livereload 触发的刷新实际上反映了源中的更改。Flask 或 livereload 中是否有我可以用来实现此目的的设置，或者这是 livereload 包的功能请求？

相关问题：

使用 Python 开发 Flask 应用程序时如何自动刷新浏览器？

更新编辑：进一步的测试表明，这特别是 Chrome 的一个问题，对于 Firefox，它可以按预期开箱即用。深入研究底层的 livereload.js 库，似乎有一个“isChromeExtension”参数，我试图将其强制设置为 True，但没有任何效果。

标签： pythonflasklivereload

解决方案

我遇到了同样的问题，这就是我为解决这个问题所做的。正如您提到的，这是一个浏览器缓存问题。所以我们想让缓存的 css/js 文件失效。我们可以通过在静态文件上设置一个版本来实现这一点。我们希望每次您更改 css 文件时都会更改版本。我所做的感觉有点老套，但你会明白的。

这是我的 html 模板

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World</title>
  <link href="{{ url_for('static', filename='main.css', version=time)}}" rel="stylesheet" type="text/css" />
</head>

<body>
  <h1 class="hello-color">
    {{ message }}
  </h1>
</body>

</html>

您可以看到version=time我正在使用以下内容传递当前时间的模板。

from flask import Flask, render_template
from time import time
app = Flask(__name__)


@app.route("/")
def hello():
    return render_template('hello.html', message="Hello World!", time=time())

from time import time和 time=time()

最后是我的主要 python 文件

from app import app

from livereload import Server

if __name__ == '__main__':
    server = Server(app.wsgi_app)
    server.serve(port=2200, host='0.0.0.0')

希望这可以帮助您或其他任何遇到此问题的人。

推荐阅读