JS 文件未在 VS Code 中的 Live Server 上加载

Question

我开始使用 VS Code，所以我没有太多经验。看起来我需要手动添加我需要的一切。来自 Visual Studio，虽然我看到了好处，但一开始这有点奇怪。

我选择 Live Server (https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) 作为我将在 Visual Studio Code 中处理的项目的 Web 服务器。不确定这是否是一个不错的选择，但评价很高。

这是我遇到的问题：当我启动 Live Server 时，我可以在根目录中提取我的 html 文件，但 Live Server 拒绝加载也在根文件夹中的 bundle.js 文件。

它不会通过引用此js 文件的index.html 页面加载bundle.js 文件。如果我只是在浏览器中输入bundle.js 的 URL，即http://127.0.0.1:5500/bundle.js，它也会拒绝加载它。当我尝试通过浏览器访问bundle.js 文件时，我得到：

无法获取 /bundle.js

我在 Chrome 中启动开发人员工具时看到以下内容，但是当我转到实际文件夹时，我看到该文件在那里。

知道为什么会发生这种情况以及如何解决吗？

Answer 1

这个问题可能很老，但我在从 XAMPP 切换到 Live Server 扩展时遇到了同样的问题。脚本标签在 XAMPP 中加载良好，但在 Live Server 上给出了 404。问题原来是相对路径格式。

我有：

src="/main.js"

它必须是：

src="./main.js"

带一个点。

Answer 2

如果您已完成以下操作：

<script> src="main.js"; </script>

替换为：

<script src="main.js";> </script>

Answer 3

我也有这个问题。 Live-Server VS Code 扩展可能有问题。我相信如果您在包含 index.html 文件的目录中使用命令行live-server，它应该可以工作。

Answer 4

我相信这个问题是你可以在 live-server 中看到 HTML 的输出，但在 live server 中看不到 JS 输出，如果这是你的问题，我的回复是： js文件不需要live server，直接上cosole，也就是做两个文件，一个html，一个是js，在html上注明js文件的src路径，连接两个文件，显示生活服务器上的网站，然后右键：检查，然后转到元素，靠近元素有控制台，您通过控制台更改js文件。

Answer 5

在这种情况下，当我将 js 文件放在名为“js”的子文件夹中时，使用上面的示例 js/main.js 进行调用。它奏效了。