Javascript 和 CSS 未正确链接到 HTML [重复]答案

【问题标题】：Javascript and CSS Not Linking Properly to HTML [duplicate]Javascript 和 CSS 未正确链接到 HTML [重复]
【发布时间】：2022-08-16 10:53:06
【问题描述】：

我试图在 Visual Studio Code 中将我的 JavaScript 文件链接到我的 HTML 文件，但我得到了 404。

这个问题不仅仅发生在 JavaScript 上；我的 CSS 外部链接也停止工作。

基本信息

我正在使用 Visual Studio 代码。在其中，我使用的是 Flask。

JS文件信息

/javascript/forecast.js 下的 forecast.js 文件

在我的 HTML 中，我在结束之前有 <script src=\"/javascript/forecast.js\"></script>身体标签。当我将鼠标悬停在 src

在 VSCode 中链接，然后单击“Follow Link”，它会将我带到正确的文件。所以我认为问题不存在。但是当我运行 Flask 项目时，我在终端中收到 127.0.0.1 - - [08/Aug/2022 11:27:22] \"GET /javascript/forecast.js HTTP/1.1\" 404 - 错误。该网站仍然运行，但没有应用任何 js。

CSS 文件信息

这个略有不同。我相信这是某种编译错误。我以前从来没有处理过这个问题……我的 CSS 过去工作得很好，但有一天它开始起作用了。在我的 HTML 文件中，我有 <link rel=\"stylesheet\" href=\"/static/styles.css\">。同样，当我将鼠标悬停在链接上并单击“关注链接”时，它会将我带到正确的 css 文件。在styles.css 中我有很多样式。现在这两个链接正常，网页加载正常。

但是，出于某种原因，如果我删除了styles.css 中的任何内容，网页的运行方式完全相同，没有任何变化。我在其他任何地方都没有 CSS，所以网站以某种方式采用了 CSS 文件的以前版本并且只使用它，而不是最新版本。这是有问题的，因为我无法更新我的任何 CSS ......因为它只是寻找未更新的版本。

最重要的是，如果我将 <link> 删除到 css 中，页面将停止运行。我不知道这是否是一些奇怪的编译错误，但不知道如何修复它。

我在这两个问题上检查了许多堆栈溢出页面，但没有一个有帮助。内联 JS 和 CSS 都可以，但每次我尝试外部时，它都不起作用。任何帮助表示赞赏。如果需要更多详细信息，请告诉我。

编辑

我真的不明白这是一个重复的问题。我的问题不在于在 Flask 中提供静态文件。它是关于链接 HTML 和 CSS 和 Javascript 的错误。这个被标记为重复的问题对我没有帮助。这描述了如何从 Flask 调用静态文件。我有一个完全不同的问题。有人可以解释这是如何重复的吗？

您可以尝试在文件引用之前使用./，如src=\"./javascript/forecast.js\"。总之很容易尝试。

标签： javascript html css flask visual-studio-code

【解决方案1】：

这可能是因为您尝试从根文件夹访问文件，但由于这是本地文件，它正在访问计算机根文件夹中的文件。您可能还想尝试清除缓存。

根文件夹问题真的很烦人。修复它的最简单方法是使用../ 前缀而不是/。例如，如果您的index.html 在根文件夹中，您可以直接添加<script src="javascript/forecast.js"></script>，它位于根文件夹内的目录中，执行<script src="../javascript/forecast.js"></script> 等。继续添加../，直到您到达正确的目录。

要清除缓存，这取决于您的网络浏览器，但大多数时候您应该能够转到您的浏览历史记录并能够从那里清除您的浏览器。

【讨论】：

你能澄清一下吗？如何解决第一个问题？以及如何清除我的缓存？每次我想对我的一个文件进行编辑时，我是否必须清除它？
对不起@Swaraag，我会澄清
很酷，所以我添加了一个 ../ 并运行它。没有什么真正改变，它仍然给了我 404 错误。再添加一个../ 使其成为<script src="../../javascript/forecast.js"></script> 后，当我单击Follow 链接时找不到该文件，当我运行它时，我仍然得到404。
那是我大部分时间使用的解决方案，也许只是不做../s，如果那不起作用那我不知道