使用VS Code插件Preview on Web Server无法连接Firebase求助

看起来你遇到了两个独立的问题：VS Code预览插件的404错误，以及XAMPP Tomcat的端口占用问题。我来一步步帮你拆解解决：

一、先解决「Cannot GET /d:/index.html」的404错误 #

这个问题的核心是预览插件的路径识别错误，插件把本地磁盘路径当成了URL路径，导致服务器找不到资源。解决步骤：

• 必须在项目文件夹根目录下打开VS Code：
  关闭当前VS Code窗口，找到你的Firebase项目所在的文件夹（比如D:\my-first-firebase-project），右键选择「用VS Code打开」。这样VS Code的工作区根目录就是你的项目文件夹，插件启动的服务器会以此为根路径。

• 重新预览：在VS Code中打开index.html，按下Ctrl+Shift+L，此时浏览器的URL应该是类似http://localhost:5500/index.html（端口号可能不同），而不是带磁盘路径的/d:/index.html，这样就能正常访问了。

• 额外验证：如果还是不行，可以试试VS Code的「Live Server」插件（商店里免费安装），右键点击index.html选择「Open with Live Server」，它的路径处理更稳定，适合新手快速预览静态项目。

二、Firebase配置的补充检查 #

虽然你已经修改了配置信息，但还是要确保初始化代码的正确性：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
<script>
  // 一定要确保这段初始化代码在Firebase脚本之后
  var firebaseConfig = {
    apiKey: "你的API密钥",
    authDomain: "你的项目ID.firebaseapp.com",
    databaseURL: "https://你的项目ID.firebaseio.com",
    storageBucket: "你的项目ID.appspot.com"
  };
  // 初始化Firebase
  firebase.initializeApp(firebaseConfig);
</script>

确认Firebase控制台里的项目配置和代码里的完全一致，尤其是authDomain和databaseURL的格式，不要多打或少打字符。

三、解决Tomcat端口被VS Code占用的问题 #

这个问题和你预览Firebase项目无关（预览插件用的是自己的小型服务器，不需要Tomcat），但还是帮你解决：

XAMPP提示8080被VS Code占用，你改了8080为7080但没用，是因为Tomcat还有其他默认端口也可能被占用。打开C:\xampp\tomcat\conf\server.xml，修改以下三个端口：

• 找到<Server port="8005" shutdown="SHUTDOWN">，把8005改成8006
• 找到<Connector port="8080" protocol="HTTP/1.1"，把8080改成7080
• 找到<Connector port="8009" protocol="AJP/1.3"，把8009改成8010
  保存文件后，重启XAMPP的Tomcat服务，应该就能正常启动了。

内容的提问来源于stack exchange，提问作者Steven