Проблема с открытием HTML-кода через браузер с использованием Visual Studio Code

Я использую Ubuntu с WSL.

Внутри Ubuntu у меня есть:

• Создал каталог для моего кода и CDя бы к этому
• Казнен код . начать работу над проектом HTML в VSCode

Однако, когда я помещаю код в шаблон HTML5 и пытаюсь его запустить, он не открывается в моем браузере. Я получаю следующее сообщение об ошибке:

Файл не найден. Возможно, он был перемещен, отредактирован или удален.

Когда я копирую путь из файла HTML в VSCode и пытаюсь вставить его в браузер, он все равно не работает.

Однако, когда я затем щелкаю правой кнопкой мыши файл HTML и открываю его через Показать в Проводнике а затем скопируйте и вставьте URL-адрес оттуда в браузер, он работает.

У него есть заголовок WSL в пути.

Почему я не могу просто открыть его в VSC? Он не находит его в браузере таким образом. Но когда это так:

файл://wsl%24/Ubuntu/home/pypy/books/paper.html

... затем находит его.

Я смущен тем, почему это происходит и долгосрочными последствиями этого.Повлияет ли это на мой веб-сайт в будущем? Не вызовет ли это проблем с хостингом? Как я могу это исправить?

Я могу воспроизвести это, и я, честно говоря, немного удивлен этим. У меня было бы то же предположение, что и у вас, что это «просто сработает». Я ожидал, что, поскольку в этом случае мы используем расширение «Remote — WSL», расширение обработает преобразование пути. К сожалению, похоже, это не так.

Расширения VSCode могут просто не иметь возможности изменять путь к файлам, когда Другие (без расширения) над файлом действуют действия.

Итак, на самом деле происходит то, что путь, который передается вашему браузеру Windows, файл://home/pypy/books/paper.html, и браузер Windows не найдет файл по этому пути. Как вы уже поняли, для браузера Windows это должно выглядеть так:

файл://wsl$/ubuntu/home/pypy/books/paper.html
# или же
файл://wsl.local/ubuntu/home/pypy/books/paper.html
# Часть «ubuntu» может отличаться в зависимости от вашего точного имени дистрибутива

Боковое примечание: %24 то, что вы видите, является просто URL-кодированной формой $.

Есть несколько решений:

• Во-первых, простым решением является использование Remote-WSL: повторно открыть в папке в Windows действие:

  • В VSCode нажмите Ctrl+Сдвиг+п чтобы открыть палитру команд
  • Начните печатать "открыть" и выберите вариант Remote-WSL: повторно открыть в папке в Windows
  • Снова запустите свой HTML-проект через F5

  Браузер должен нормально открываться с помощью Окна (а не WSL/Linux).

• Второй вариант, который вы обычно будете использовать по мере продвижения в разработке HTML, — запустить локальный веб-сервер. Это позволит вам разрабатывать в более «реальной» среде, что вам нужно сделать, чтобы многие функции работали (например, Node и его различные веб-фреймворки, такие как Svelte, React и т. д. и т. д. и т. д.).

Повлияет ли это на мой веб-сайт в будущем? Не вызовет ли это проблем с хостингом?

Ну, честно говоря, это мог, но не в том случае, если вы делаете что-то "правильно". Это нужно для того, чтобы пути в вашем HTML были родственник в каталог файла. Например, вы мог обратиться к файлу изображения в подкаталоге файла HTML, указав:

<img src="file://wsl.local/ubuntu/home/pypy/books/images/logo.png" />

И это будет работать при просмотре файла локально на вашем компьютере. Конечно, это не удастся, если вы разместите его на реальном веб-сервере.

Вместо этого используйте относительный путь:

<img src="images/logo.png" />

... который будет работать как в VSCode при локальном просмотре (по крайней мере, после выбора Повторно открыть в папке в Windows) и при размещении в Интернете.

Обычно HTML, JS, CSS и т. д. передаются в браузер через веб-сервер. Таким образом, рекомендуется использовать его при разработке вашей страницы или приложения.

К счастью, для VSC есть расширение под названием Живой сервер это упрощает дело. Поскольку ваши файлы расположены в WSL, расширение должно быть установлено в (удаленном) экземпляре WSL. Вот короткое видео, как его можно установить и как им пользоваться.

Во время работы Live Server соответствующая вкладка браузера будет автоматически перезагружена при сохранении любых изменений в проекте.