使用XAMPP与VS Code“Open in Browser”插件运行HTML报错求助

错误原因 #

你配置的自定义路径有误：XAMPP的Apache服务器默认把htdocs目录作为网站根目录（Document Root），所以访问文件的正确URL是http://localhost/Welcome.html，而非http://localhost/xampp/htdocs/Welcome.html——后者相当于在根目录下查找不存在的xampp/htdocs子文件夹，插件无法识别正确的文档根路径，因此触发报错。

修复步骤 #

1. 修正插件的自定义URL配置 #

打开VS Code设置（快捷键Ctrl+,），搜索open-in-browser.custom，将自定义URL修改为：

http://localhost/${fileBasename}

其中${fileBasename}是插件内置变量，会自动替换为当前打开的文件名，比如打开Welcome.html时，会生成正确的http://localhost/Welcome.html路径。

2. 验证XAMPP的文档根设置（可选） #

若修改后仍报错，检查Apache的配置是否正确：

• 打开XAMPP控制面板，点击Apache的Config按钮，选择httpd.conf
• 找到DocumentRoot和<Directory>的配置行，确认它们指向你的htdocs目录，示例如下：

  DocumentRoot "C:/xampp/htdocs"
  <Directory "C:/xampp/htdocs">
  

• 保存配置后重启Apache服务。

3. 使用插件默认的localhost模式（更简便） #

若不想自定义URL，可在插件设置中找到open-in-browser.default，选择http://localhost，同时确保VS Code的工作区直接打开XAMPP的htdocs文件夹——插件会自动将当前文件映射为http://localhost/[文件名]的路径。

测试验证 #

1. 确认XAMPP的Apache服务已启动
2. 在VS Code中打开htdocs目录下的Welcome.html
3. 点击插件的“Open in Browser”按钮，页面应能通过http://localhost/Welcome.html正常访问，不再出现报错。

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