我正在使用带有 WSL 的 Ubuntu。
在 Ubuntu 中，我有：
- 为我的代码创建一个目录并
cd进入它 - 执行后
code .开始在 VSCode 中处理 HTML 项目
但是，当我将代码放入 HTML5 模板并尝试运行它时，它不会在我的浏览器中打开。我收到以下错误消息：
File Not Found. It may have been moved, edited, or deleted.
当我从 VSCode 中的 HTML 文件复制路径并尝试将其粘贴到浏览器中时，它仍然不起作用。
但是，当我右键单击 HTML 文件并通过以下方式打开它时在资源管理器中显示然后将 URL 复制并粘贴到浏览器中，就可以了。
它的路径中确实有 WSL 标题。
为什么我不能直接在 VSC 中打开它？这样在浏览器中找不到它。但是当它像这样时：
file://wsl%24/Ubuntu/home/pypy/books/paper.html
...然后它就找到了它。
我很困惑为什么会发生这种情况以及长期后果。这会影响我未来的网站吗？会导致托管问题吗？我该如何解决这个问题？
答案1
我可以重现这一点，老实说，我对此感到有点惊讶。我和你一样认为这会“正常工作”。我预计，由于我们在本例中使用了“Remote - WSL”扩展，因此该扩展会处理路径转换。不幸的是，事实似乎并非如此。
VSCode 扩展可能无法在以下情况下修改文件路径：其他（非扩展）操作正在对文件进行操作。
因此，实际发生的情况是，传递给 Windows 浏览器的路径是file://home/pypy/books/paper.html，而 Windows 浏览器不会根据该路径找到文件。正如您所发现的，对于 Windows 浏览器，它应该是这样的：
file://wsl$/ubuntu/home/pypy/books/paper.html
# or
file://wsl.local/ubuntu/home/pypy/books/paper.html
# The "ubuntu" part may vary depending on your exact distribution name
附注：%24您看到的只是的 URL 编码形式$。
有几种解决方案：
首先，一个简单的解决方案是使用Remote-WSL：在 Windows 中的文件夹中重新打开行动：
- 在 VSCode 中，按Ctrl+ Shift+P打开命令面板
- 开始输入“重新开放”并选择选项Remote-WSL：在 Windows 中的文件夹中重新打开
- 通过以下方式再次运行您的 HTML 项目F5
浏览器应该可以使用视窗（而不是 WSL/Linux）路径。
第二种选择是运行本地 Web 服务器，这也是您在 HTML 开发方面更高级时通常会使用的方法。这将使您能够在更“真实”的环境中进行开发，因为您需要这样做才能使用许多功能（例如 Node 及其各种 Web 框架，如 Svelte、React 等）。
这会影响我的网站的未来吗？会导致托管问题吗？
嗯，说实话，可以，但如果你按照“正确的方式”做事，就不会这样。这是为了确保 HTML 中的路径相对的到文件的目录。例如，你可以通过指定以下内容引用 HTML 文件子目录中的图像文件：
<img src="file://wsl.local/ubuntu/home/pypy/books/images/logo.png" />
在您的机器上本地查看文件时，此方法有效。当然，当您将其托管在真实的 Web 服务器上时，此方法会失败。
相反，使用相对路径：
<img src="images/logo.png" />
... 在本地查看时，它将在 VSCode 中工作（至少在选择在 Windows 文件夹中重新打开) 以及在网络上托管时。
答案2
通常，HTML、JS、CSS 等都是通过 Web 服务器提供给浏览器的。因此，在开发页面或应用程序时使用 Web 服务器是一种很好的做法。
幸运的是，VSC 有一个名为直播服务器这让事情变得简单。由于您的文件位于 WSL 中，因此扩展应该安装在（远程）WSL 实例中。这里有一个简短的视频，介绍如何安装和使用它。
当 Live Server 运行时，当您保存项目内的任何更改时，相关浏览器的选项卡将自动重新加载。