为什么 Javascript 在我的 Flask 应用程序中不起作用？ [复制]

Question

我的应用程序中的 Javascript 有问题。我正在使用 Flask，我正在使用 PyCharm。我的 html 位于模板文件夹中，而我的 Javascript 位于静态文件夹中，所以这是外部文件。它被称为 main.js。

这些是 html 中 javascript 的链接：

<script type="text/javascript" src="/static/main.js"></script> 

<script type="text/javascript" src="{{ url_for('static', filename='main.py') }}"></script>

我尝试了这两个版本，但都遇到了同样的问题。这两个链接实际上都适用于我在 localhost 上的页面的第一次加载，但是我的 Javascript main.js 文件中的每一次下一次更改都不会被识别。例如，我将 alert() 放在 main.js 中只是为了确保链接正常工作，并且它们工作得很好。但是后来我删除了 alert()，放了一些其他的 Javascript 代码并保存了它，但是即使我从 main.js 文件中删除了这个 alert()，它仍然是活动的。而我在 main.js 中添加的这个新代码，看起来好像根本不存在。所以我的问题是为什么我的 main.js 文件不起作用？

我在这里遗漏了什么吗？有人在 Flask 或任何其他 Python（微）框架中遇到过这种问题吗？

Answer 1

您的第二个参考是py 文件，而不是js 文件：

<script type="text/javascript" src="{{ url_for('static', filename='main.py') }}"></script>

在使用 Flask 时，上面是完整路径的更好替代方案，因此将其更改为：

<script type="text/javascript" src="{{ url_for('static', filename='main.js') }}"></script>

如果您的浏览器仍未刷新 javascript，您应该尝试硬刷新页面。在 Chrome 上，这是通过在 PC 上按 CTRLShiftR 或 CMDShift kbd>R 在 Mac 上。这应该会清理您的缓存并强制重新加载 js 文件。

最后，如果这些都不起作用，您应该检查您的 python 代码是否正在修改标头以获得更长的缓存。您可以通过尝试包含以下内容来“强制”Flask 请求以缩短缓存时间：

@app.after_request
def add_header(response):
    response.cache_control.max_age = 300
    return response

您也可以尝试将 Flask 应用设置更改为无缓存：

app = Flask(__name__)
...
app.config['SEND_FILE_MAX_AGE_DEFAULT'] = 0

我也会尝试使用其他浏览器并检查network inspect tool (Chrome) 以查看文件是否正在加载。