VS Code Live Server去掉.html后缀后出现Cannot GET错误如何修复

Netlify默认内置了无后缀HTML路径的自动解析能力，以下配置可以让本地Live Server的行为和Netlify线上环境保持一致，解决Cannot GET /xxx报错问题。

方案1：启用内置Pretty URL功能（推荐） #

• 打开VS Code设置，使用快捷键 Ctrl+,（Windows/Linux）或 Cmd+,（Mac）即可调出
• 在顶部搜索框输入 live server pretty url，找到 Live Server > Settings: Pretty Url 选项，勾选启用
• 重启Live Server后即可正常访问不带.html后缀的路径

方案2：手动配置URL重写规则 #

如果方案1不生效，可以通过自定义规则实现路径映射：

• 按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）调出命令面板，输入 Preferences: Open Settings (JSON) 并回车
• 在打开的JSON配置文件中添加如下内容：

"liveServer.settings.rewriteUrls": [
    {
        "from": "^/([^.]+)$",
        "to": "/$1.html"
    }
]

• 保存配置文件后重启Live Server即可，规则会自动将所有不带后缀的请求映射到对应.html文件。

备选方案：调整站点文件结构 #

如果不想修改编辑器配置，也可以通过改造文件结构实现无后缀访问：

• 将原本的page1.html改为page1/index.html，其余页面按相同规则修改
• 调整后无需额外配置，Live Server和Netlify都可以直接通过/page1路径访问对应页面。

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