Почему Vercel не отображает мой CSS-файл при развертывании на веб-странице?
При работе на локальном хосте результат соответствует ожиданиям.
Но после обновления стилей в GitHub, а затем последующего развертывания на Vercel для этого URL-адреса: https://varshaa.vercel.app/JSbasics/counter веб-страница выглядит так.
Это мой репозиторий на GitHub. Пожалуйста, дайте мне знать, где я сделал неправильно. https://github.com/shettyvarshaa/varshaashetty/tree/main/JSbasics/counter
Я попытался добавить файл CSS и HTML в отдельную папку, но это не сработало.
Ответы 1
Я могу показать вам волшебный трюк, нажмите здесь: https://varshaa.vercel.app/JSbasics/counter/
Как это может быть?
При доступе к HTML-странице https://varshaa.vercel.app/JSbasics/counter/index.html (или даже без index.html, но с последней косой чертой), CSS-файл style.css загружается корректно, поскольку относительный путь <link rel = "stylesheet" href = "style.css" /> правильно разрешается в https://varshaa.vercel.app/JSbasics/counter/style.css.
Однако при доступе к URL-адресу без косой черты в конце (https://varshaa.vercel.app/JSbasics/counter ) браузер рассматривает его как файл, а не каталог. Следовательно, относительные пути разрешаются относительно родительского каталога URL-адреса. Поэтому браузер пытается загрузить файл CSS из https://varshaa.vercel.app/JSbasics/style.css, что неверно и приводит к тому, что CSS не применяется.
Чтобы гарантировать правильную загрузку файла CSS независимо от формата URL-адреса, в теге следует использовать абсолютный путь. Это гарантирует, что браузер всегда запрашивает файл CSS из правильного местоположения, независимо от формата URL-адреса.
<link rel = "stylesheet" href = "/JSbasics/counter/style.css" />
Кроме того: ваш репозиторий git является частным, люди не могут видеть ваш код.
style.css не найден для развернутого приложения. убедитесь, что вы его развертываете. и твой репозиторий выдает мне ошибку 404