如何为VSC Live Server扩展添加新网页 解决旧页面反复加载问题

核心排查方向 #

• 确认Live Server的服务根目录和项目存储路径完全匹配
  直接对单个旧html文件右键启动Open with Live Server时，扩展会自动把该旧文件所在的文件夹设为静态服务根目录。如果后续新增的网页存放在其他文件夹、或是跨了层级，扩展永远无法加载到目标新页面。
  正确启动方式：在VSCode左侧资源管理器选中所有项目文件共同所属的最上层根文件夹，右键选择Open with Live Server启动服务，不要直接点击单个旧页面启动服务。
• 清除浏览器端的强缓存干扰
  浏览器对旧页面的强缓存会阻止新资源加载，就算文件路径配置正确，也会反复拉取缓存里的旧页面。操作流程：
  1. 打开运行Live Server的标签页，默认访问端口为5500
  2. 按F12调出开发者工具，切换到网络面板，勾选禁用缓存选项
  3. 保持开发者工具处于打开状态，手动在地址栏输入新增网页的完整访问路径，比如http://127.0.0.1:5500/new-page.html完成访问，不要依赖地址栏的历史跳转记录。
• 检查扩展配置的硬绑定规则
  如果之前修改过Live Server的扩展设置，把默认启动页写死为旧的html文件，不管新增多少页面，服务启动后都会强制跳转到绑定的旧页面。操作流程：
  1. 打开VSCode设置页，搜索Live Server: Default File配置项
  2. 若非明确需求，清空该配置项的自定义值，让扩展自动在服务根目录匹配默认入口文件；如果需要指定启动页，确保填写的路径是你实际要设为入口的新文件路径。
• 核对新增网页的路径规范
  新增网页的文件名如果带有中文、空格、特殊符号，或是路径大小写和实际文件名不匹配，Live Server的静态服务无法正常识别请求，会自动回退到默认的旧入口页面。调整要求：所有网页文件名使用小写英文加连字符的格式，避免特殊字符，确保浏览器地址栏输入的路径拼写和实际文件名完全一致。

快速验证：完成以上配置调整后，直接在浏览器输入新增网页的完整相对路径访问，能正常打开就说明配置生效，后续再根据需要调整页面间的跳转链接即可。

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