Visual Studio Code Live Server扩展显示~ /无法加载代码求助

我在学习Web开发时安装了VS Code的Live Server扩展，用来实时预览代码效果。写完基础HTML代码后启动Live Server，页面却只显示空白内容，顶部有“~ /”字样，底部还展示着文件名和文件图标。我用的是Microsoft Edge浏览器，也安装了对应的Live Server扩展，试过添加系统环境变量、设置liveServer.settings.port为0，但问题还是没解决，求排查解决步骤。

相关代码与截图 #

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>

相关截图 #

• VS Code界面及代码截图：
• Live Server页面截图：
• Edge浏览器Live Server扩展设置截图：

当前VS Code配置 #

{
    "workbench.colorTheme": "Default High Contrast",
    "files.autoSave": "afterDelay",
    "liveServer.settings.donotVerifyTags": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "explorer.confirmDelete": false,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "",
    "liveServer.settings.ChromeDebuggingAttachment": false,
    "liveServer.settings.port": 0
    
}

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