已安装实时服务器但无法在 VS 代码中运行答案

【问题标题】：Live server installed but not working in VS code已安装实时服务器但无法在 VS 代码中运行
【发布时间】：2020-09-26 04:26:15
【问题描述】：

我已经安装了实时服务器扩展，但在我保存 HTML 或其他文件后浏览器没有更新。什么可能导致问题？

【问题讨论】：

这是一个大型项目吗，因为在很多被监视的文件中，这可能会阻碍扩展程序查看文件（参见unix.stackexchange.com/questions/13751/… for linux）

标签： javascript html css visual-studio-code

【解决方案1】：

重新安装扩展并重新启动您的文本编辑器以解决问题。

【讨论】：

很简单。谢谢！

【解决方案2】：

我遇到了这个问题，我通过将settings.json 文件中的端口号更改为打开的端口号解决了这个问题。

要访问settings.json 文件，您只需单击CTRL+SHIFT+P，然后键入“设置”，单击“首选项：打开设置（JSON）”，然后将其粘贴到{ }：

"liveServer.settings.port": 0

这将每次随机选择一个打开的端口。这是我的 JSON 文件的样子：

{
    "liveServer.settings.port": 0
}

如果 JSON 文件中有多行，请确保每行以逗号分隔 (,)，如下所示：

{
    "liveServer.settings.CustomBrowser": "microsoft-edge",
    "liveServer.settings.port": 0
}

【讨论】：

【解决方案3】：

实时服务器已启动，但仍未在浏览器中自动打开页面

open your preferred browser and type http://127.0.0.1:5500/<if_directory_name>/<else_direct_your_file_name>

example:

http://127.0.0.1:5500/index.html
-or-
http://127.0.0.1:5500/your_folder_name/index.html

注意：有些时候端口号5500会改成5501

【讨论】：

【解决方案4】：

我在文件名中有一个空格，可以在其中找到 index.html。
喜欢：3. Typography.
刚刚去掉了空格：3.Typography，因为（当然）我们不能在 url 中有空格。

【讨论】：

【解决方案5】：

很容易解决。只需按 (ctrl + ,) 打开设置并选择常用第一个字段是 （自动保存）默认值为 off 您必须将其更改为 After delay

【讨论】：

【解决方案6】：

如果实时服务器没有运行并且在端口 5500 上渲染 html 页面，例如 http://127.0.0.1:5500/index.html 不工作。

那么这可能是由于您的系统上的连接问题。

我在下面的html页面编译时遇到了同样的问题：

<!DOCTYPE html>
<html>
<body>
    <h1>Hello world</h1></body>
</html>

通过将实时服务器设置更改为我的本地 IP 解决了这个问题。

我的本地 ip：http://192.168.2.16:5500/index.html 正在实时渲染更改并正常工作。

步骤可以参考： https://www.youtube.com/watch?v=_B3RRVhgCOw

这适用于默认情况下未使用端口 5500 运行实时服务器的任何人。

【讨论】：

此类问题请参考 vs code 中的 settings.json 文件。 { "liveServer.settings.useLocalIp": true, "liveServer.settings.CustomBrowser": "chrome" } 此外，如果您在公司防火墙后面，此方法可能不起作用，您需要将其打开。

【解决方案7】：

我有同样的问题，然后我通过从 settings.json 文件中删除实时服务器的所有设置并重新安装实时服务器扩展并现在正确运行它来解决它。

vs code

【讨论】：

【解决方案8】：

或者检查您的文件名是否包含空格，例如我将文件命名为“Countdown Project.html”，但它没有工作，但当我意识到“Countdown”和“Project”之间的空格是问题问题解决了。为您的所有项目命名，不带空格。

【讨论】：

【解决方案9】：

这是因为您在环境变量中添加的路径不足。

首先你可以做的是关闭 vs 代码
转到我的电脑的属性
点击高级设置
点击环境变量
您可以从那里添加路径，单击表中所示的路径变量 6 。在路径中添加新行并复制粘贴系统的路径 32

C:\Windows\System32

希望此解决方案适用于您的情况

【讨论】：

【解决方案10】：

开启自动保存功能。文件-> 自动保存

【讨论】：

【解决方案11】：

请使用正确的 HTML 语法，即?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello, World</title>
</head>

<body>
  My first Web dev code
</body>

</html>

作为 Web 开发的新手，我只使用head tag。该网页在浏览器中运行，但实时服务器无法处理它。你可以在 vscode 中输入html:5 然后点击 tab 来获取上面的 sn-p。

另外，请确保启用了 vscode 中的 autosave 功能，您可以通过转到 vscode 设置 shortcut : Ctrl + , 然后键入 autosave 来做到这一点。将Files: Auto Save 更改为afterDelay，如果您想在无状态下查看代码中的更改，请将Files: Auto Save Delay 编辑为1。

现在坐下来观看奇迹发生?。

【讨论】：

【解决方案12】：

我在 VSCode 中遇到过几次这个问题，对我来说这是因为我从 PS 提示符调用 live-server。我切换到“命令提示符”，它工作得很好。

Switch from PowerShell to Command Prompt

【讨论】：

【解决方案13】：

解决5500端口号错误的最佳方法

如果是（5500 端口号），请在“上线”部分检查下面的端口号然后转到浏览器窗口并输入 localhost:5500 然后选择您的项目文件夹然后您可以看到自动更新。

【讨论】：

【解决方案14】：

打开“资源管理器”窗口，按打开文件夹按钮并浏览您的项目文件夹。它对我有用

【讨论】：

【解决方案15】：

如果不去这个地址：http://127.0.0.1:5500/ 试试@Avneet 的解决方案。

如果可以到达地址，只是浏览器打不开，按照这个方法：

使用来自实时服务器的默认选项检查浏览器设置。
重置 Windows 默认应用。
我使用的是 Brave 浏览器，当我创建默认浏览器时从浏览器的设置中重新启动vscode程序，问题已解决。它也适用于其他浏览器。

【讨论】：