Live Server 页面未自动刷新需依次检查:一、确认插件已启动并显示运行提示;二、启用自动保存;三、禁用冲突插件;四、配置 settings.json 启用 fullReload 和指定 root;五、更换端口并清除浏览器缓存。

如果您在使用 VSCode 的 Live Server 插件时,修改 HTML 或 CSS 文件后浏览器页面未自动刷新,则可能是由于插件配置、文件监听机制或服务器启动方式异常所致。以下是解决此问题的步骤:
本文运行环境:MacBook Air,macOS Sequoia。
一、检查 Live Server 是否已正确启动
Live Server 必须处于运行状态才能监听文件变化并触发刷新。若仅安装插件但未启动服务,自动刷新功能不会生效。
1、在 VSCode 中打开一个 HTML 文件(如 index.html)。
2、右键点击编辑器中的 HTML 文件内容区域,选择 Open with Live Server。
3、观察 VSCode 右下角状态栏,确认是否显示 Live Server: Running on http://127.0.0.1:5500 类似提示。
二、验证文件保存是否启用自动保存模式
Live Server 默认仅响应已保存的文件变更,若编辑后未保存,插件无法捕获修改事件。
1、点击 VSCode 左上角菜单栏中的 文件 → 自动保存,确保该项已被勾选。
2、或按下 Cmd + , 打开设置,在搜索框中输入 files.autoSave,将值设为 onFocusChange 或 afterDelay。
三、禁用可能冲突的其他服务器插件
多个本地服务器插件(如 Browser Preview、Auto Open Markdown Preview)可能占用相同端口或劫持文件监听逻辑,导致 Live Server 刷新失效。
1、点击 VSCode 左侧活动栏的扩展图标(方块拼图形状)。
2、在搜索框中输入 Browser Preview,若已安装,点击其右侧的齿轮图标,选择 禁用。
3、重复上述操作,检查并禁用名称中含 server、preview 或 live 的非 Live Server 插件。
四、修改 Live Server 配置以启用强制刷新
部分项目结构(如嵌套子目录、多入口 HTML)可能导致默认监听路径不匹配,需手动指定根目录与刷新策略。
1、按下 Cmd + Shift + P 打开命令面板,输入 Preferences: Open Settings (JSON) 并回车。
2、在 settings.json 文件中添加以下配置项:
"liveServer.settings.donotShowInfoMsg": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": "google chrome --incognito",
"liveServer.settings.root": "./",
"liveServer.settings.fullReload": true
3、保存文件后,关闭当前浏览器标签页,重新右键 HTML 文件选择 Open with Live Server。
五、重置 Live Server 端口并清除缓存
端口被占用或浏览器缓存残留可能导致连接建立成功但刷新请求无响应。
1、点击 VSCode 右下角状态栏中的 Live Server: 5500,选择 Change Port,输入 5501 后回车。
2、在 Chrome 浏览器中,按下 Cmd + Shift + Delete,勾选 缓存的图像和文件,点击 清除数据。
3、关闭所有已打开的 Live Server 页面,重新通过右键菜单启动服务。










