VS Code 中的 Live Server 扩展在 WSL 中不起作用

Question

我很久以前就在 Windows 中使用 Visual Studio 工作，没有任何问题。 我在我的电脑上安装了 WSL，一切都很完美。

但现在我将我的网页目录之一迁移到 WSL 根目录 \wsl$\Ubuntu\home\user\webPage

当我单击“Live Server”扩展时，它会正确加载到： http://127.0.0.1:5500/index.html

但是当我进行更改并保存时，不起作用

我还需要改变其他东西吗？当然所有扩展都安装了，好像是一样的

Answer 1

我遇到了同样的问题，但在 Windows 上尝试时，它工作正常，所以我猜 Live Server 会尝试将其加载为 localhost（即 127...），但 WSL 不使用它。这可以通过在 WSL 终端上运行 ifconfig 来确认。

我在扩展程序上发现了一个名为“使用本地 IP”的设置。检查后，它将使用 WSL 地址而不是本地主机打开窗口，并且更改会正确显示。

Answer 2

在 VS Code 扩展中修改此设置：

"liveServer.settings.https": {
    "passphrase": "true",
    "key": "true",
    "cert": "true",
    "enable": 1
},

Answer 3

这对我有用。

1. 在 VSCode 中安装 远程开发扩展 包，然后关闭 VSCode。
2. 使用

   $sudo apt install wslu

   安装 wslview。
3. 使用

   $code <folder_name>

   打开包含 html 文件的文件夹。
4. 确保左下角显示 WSL:Ubuntu。如果没有，请单击该按钮并选择新的 WSL 窗口，然后在 WSL 目录中选择您的项目文件夹。
5. 您可能需要在 WSL VScode 窗口中重新安装实时服务器扩展。安装后，在实时服务器扩展

   "liveServer.settings.CustomBrowser": "wslview"

   的setting.json中添加或更新此行。 VSCode 可能会将“wslview”标记为问题/错误，忽略它即可。
6. 在 WSL 终端中运行命令

   $BROWSER='wslview'

   。

现在检查实时服务器是否正常工作。

Answer 4

我通过打开 VsCode 终端 -> 端口并单击“转发端口”，然后只需键入 5500（默认 LiveServer 端口）来解决我的问题。

Answer 5

您必须安装此扩展Remote Developer Extenson Pack

完成此操作后，正常打开你的Visual Studio，你就可以开发了，有一些扩展不兼容。

更多参考资料这里

重要的是要在左下侧的 VS 代码中看到您处于绿色的 WSL:Ubuntu 中，您也可以在该侧打开WSL UBUNTU