如何在VS Code Live Server本地环境移除URL的.html后缀并访问子页面

问题根源 #

你当前配置的liveServer.settings.rewriterules是单个页面的硬编码规则，只能匹配/learn这一个路径，无法覆盖所有子页面，而正式环境的.htaccess是动态匹配所有存在的.html文件，这是两者的核心差异。

解决方案：配置通用正则重写规则 #

修改VS Code的settings.json，将rewrite规则替换为通用正则匹配，自动将所有不带后缀的路径映射到对应的.html文件：

{
    "workbench.colorTheme": "Monokai Night",
    "workbench.iconTheme": "material-icon-theme",
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.codeActionsOnSave": {},
    "liveServer.settings.rewriterules": {
        // 匹配所有不带后缀的路径（不含点的路径），映射到对应.html文件
        "^/([^.]+)$": "/$1.html"
    }
}

规则说明 #

• ^/([^.]+)$：正则表示匹配以/开头、路径中不包含点的请求，避免误匹配.css/.js等静态资源
• /$1.html：将匹配到的路径部分（比如learn）替换为learn.html，完成重写

适配多层子目录的场景 #

如果你的子页面在多层目录下（比如/course/intro对应/course/intro.html），可以使用更宽松的正则：

"liveServer.settings.rewriterules": {
    "^/(.+)$": "/$1.html"
}

这个规则会匹配所有非根路径的请求，自动追加.html后缀，Live Server默认会优先处理存在的静态文件，一般不会和静态资源路径冲突。

生效步骤 #

1. 保存settings.json文件
2. 关闭当前运行的Live Server，重新启动（右键点击HTML文件选择Open with Live Server）
3. 访问不带.html的路径（如/learn），即可正常加载对应页面

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