如何使用VS Code的Live Server插件避免保存修改时页面重载？

方案1：启用Live Server的局部热重载（推荐） #

Live Server支持局部注入修改而非全页重载，调整以下设置即可：

• 打开VS Code的设置面板（快捷键Ctrl+,）
• 搜索liveServer.settings.hotReload，确保勾选启用（设为true）
• 搜索liveServer.settings.hotReloadMethod，选择injectChanges选项
• 保存设置后重新启动Live Server，后续修改保存时只会更新变化的部分，页面不会全量重载

方案2：通过脚本恢复页面状态（兼容旧版本Live Server） #

如果局部热重载不生效，可添加一段脚本自动记录视频进度和滚动位置，即使页面重载也能快速回到编辑位置：

<script>
// 恢复并保存视频播放进度
const videoEl = document.querySelector('video');
if (videoEl) {
  // 页面加载时恢复进度
  const savedTime = localStorage.getItem('videoProgress');
  if (savedTime) videoEl.currentTime = parseFloat(savedTime);
  // 实时保存进度
  videoEl.addEventListener('timeupdate', () => {
    localStorage.setItem('videoProgress', videoEl.currentTime);
  });
}

// 恢复并保存滚动位置
window.addEventListener('beforeunload', () => {
  localStorage.setItem('scrollPos', window.scrollY);
});
window.addEventListener('load', () => {
  const pos = localStorage.getItem('scrollPos');
  if (pos) window.scrollTo(0, parseInt(pos));
});
</script>

将这段代码放在HTML的</body>标签前即可。

方案3：调整重载延迟 #

若频繁保存导致多次重载，可设置延迟合并修改：

• 在VS Code设置中搜索liveServer.settings.delay
• 设置合适的延迟值（比如1000，单位毫秒），这样Live Server会等待设定时间后再执行重载，避免多次保存触发多次刷新

补充说明 #

IIS本身只是静态文件服务器，没有监听文件变化自动重载的机制，所以修改文件后不会自动刷新页面；而Live Server默认的全页重载是为了确保所有修改都能生效，通过调整上述设置可以兼顾自动更新和页面状态保留。

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