为什么 vercel 在网页中部署时不渲染我的 css 文件？

Question

在本地主机上运行时，输出符合预期。

但是在 GitHub 中更新样式后，然后在 vercel 上部署此 URL：https://varshaa.vercel.app/JSbasics/counter，网页看起来像这样。

这是我的 GitHub 存储库。请让我知道我哪里做错了。 https://github.com/shettyvarshaa/varshaashetti/tree/main/JSbasics/counter

我尝试将 CSS 和 HTML 文件添加到单独的文件夹中，但没有成功。

Answer 1

我可以向你展示一个魔术，点击这里：https://varshaa.vercel.app/JSbasics/counter/

怎么可能？

访问 https://varshaa.vercel.app/JSbasics/counter/index.html 处的 HTML 页面时，CSS 文件 style.css 已正确加载，因为相对路径正确解析为 https://varshaa。 vercel.app/JSbasics/counter/style.css.

但是，当访问不带尾部斜杠的 URL 时 (https://varshaa.vercel.app/JSbasics/counter)，浏览器会将其视为文件，而不是目录。因此，相对路径是相对于 URL 的父目录进行解析的。因此，浏览器尝试从 https://varshaa.vercel.app/JSbasics/style.css 加载 CSS 文件，这是不正确的并导致 CSS 未被应用。

为了确保无论 URL 格式如何，CSS 文件都能正确加载，您应该在标签中使用绝对路径。这可确保浏览器始终从正确的位置请求 CSS 文件，无论 URL 的格式如何。

<link rel="stylesheet" href="/JSbasics/counter/style.css" />

另外：你的 git 存储库是私有的，人们无法看到你的代码。