原文:Visual Studio Code Live Server Not Working

VS Code 有很多很棒的扩展,而 Live Server 是其中之一。

只需点击几下,Live Server 就能让你在实际的浏览器中看到你的页面。更好的是,它具有实时重载功能,所以如果你更新了代码,这些更新也会显示在浏览器中。

你所要做的就是在你想要查看的 HTML 文件中点击右键,然后选择“用 Live Server 打开”。

但是,如果 Live Server 没有像你期望的那样打开浏览器并显示页面,怎么办?在这种情况发生的时候,你可以试试以下办法。

重启 VS Code

有时候,你能做的最好的事情就是重新启动 VS Code。

首先,保存你所有的工作。然后关闭 VS Code,这也将停止运行你所安装的所有扩展。

然后,重新打开 VS Code,再试一次——打开你想查看的 HTML 文件,点击右键,并选择“用 Live Server 打开”。

为 Live Server 设置浏览器

有可能是扩展功能在工作,但你的系统没有默认的浏览器。

即使你为你的系统设置了默认浏览器,也不妨让 Live Server 明确知道你想使用哪个浏览器也无妨。

首先,用 F1 打开命令栏,然后输入 Preferences: Open Settings (JSON),并选择该选项。

这将打开你的 VSCode settings.json 文件。

一路滚动到文件底部,在最后一个设置后添加一个逗号,然后粘贴 "liveServer.settings.CustomBrowser": "chrome"

settings-json

注意,你也可以把 "liveServer.settings.CustomBrowser" 的值设置为 "firefox""safari" 或其他浏览器。

最后,保存 settings.json 文件,并尝试再次运行 Live Server。

为你的操作系统设置默认浏览器

即使在告诉 Live Server 你想使用哪个浏览器之后,它仍有可能无法在该浏览器中正确打开你的页面。

接下来要尝试的是为你的操作系统本身设置默认浏览器。

具体方法可能根据你的操作系统而有所不同,所以如果你不确定,最好搜索一下如何做到这一点。

下面是展示如何在 Windows 中设置页面。

image-56
截图来自 Advitya-sharma

直接查看页面

如果由于某些原因,Live Server 仍然没有在你的浏览器中自动打开页面,不用担心。你可以随时打开你选择的浏览器,直接查看该页面。

打开浏览器,输入 http://127.0.0.1:5500/<your_file_name>

例如,如果你的文件叫 index.html,只需输入 http://127.0.0.1:5500/index.html

只要 Live Server 正在运行,你就应该可以看到你的页面。

小结

这些是一些常见的修复方法,如果 Live Server 没有按照你期望的方式运行,你可以试试这些方法。

祝你编程愉快。