VSCode通过WSL运行HTML文件时打开空白浏览器窗口如何解决

根因说明 #

• WSL内部的Linux格式路径（如/root/demo.html、/home/user/test.html）无法被Windows侧的浏览器直接解析，无效路径会被浏览器当作搜索词提交给默认搜索引擎，因此出现跳转google.com的情况
• 编辑器的运行/调试配置默认传递WSL内部路径给浏览器，未做跨系统路径转换，Windows侧无法直接访问WSL分区的原始路径，因此手动输入路径也会提示文件不存在

解决方案 #

方案1：临时HTTP服务托管（最通用，适配所有调试场景） #

在WSL中进入HTML文件所在的目录，执行命令启动本地静态服务：
python3 -m http.server 12345
端口可根据需求自行修改，只要不被占用即可。之后在Windows侧浏览器访问http://localhost:12345/[你的HTML文件名]即可正常加载页面，编辑器调试配置直接绑定该地址即可。

方案2：转换为WSL分区的Windows可访问路径 #

WSL的Linux分区在Windows侧有专属的访问前缀：\\wsl$\[你的WSL发行版名称]\，比如使用Ubuntu发行版时，WSL内的/home/user/test.html对应的Windows路径为\\wsl$\Ubuntu\home\user\test.html。
修改编辑器的运行/调试启动路径为上述Windows格式路径，即可直接调用浏览器正常打开文件。

方案3：使用Windows挂载目录存储文件 #

将需要调试的HTML文件存放在Windows本地目录（如D:\web\test.html），该目录在WSL中默认挂载路径为/mnt/d/web/test.html。直接在WSL中操作该挂载路径下的文件，调用浏览器启动时会自动识别为Windows本地路径，不会出现解析失败问题。

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