Live Server插件需正确配置才能实现自动刷新：一、安装插件；二、右键已保存的.html文件启动；三、用Ctrl+Shift+P执行Live Server: Start；四、在.vscode/settings.json中设端口与root路径；五、开发者工具Network页勾选Disable cache。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
如果您在使用 Qoder（应为 VSCode 的笔误，实际指 Visual Studio Code）开发前端项目时，希望实现浏览器自动刷新功能，则需正确配置 Live Server 插件。该插件依赖 HTTP 服务监听与文件变更检测机制，若设置不当，将导致修改保存后页面无响应。以下是多种可立即生效的配置与启动方法：
一、安装 Live Server 插件
此步骤确保 VSCode 具备本地 HTTP 服务器及实时重载能力，是所有后续操作的前提。
1、打开 VSCode，点击左侧活动栏的扩展图标（四个方块组成的图标）。
2、在顶部搜索框中输入Live Server，按回车确认搜索。
3、在结果中找到作者为Ritwick Dey、名称为Live Server的官方插件。
4、点击“安装”按钮，等待进度条完成。
5、安装完毕后，VSCode 底部状态栏将出现蓝色的Go Live按钮。
二、通过右键菜单启动服务
该方式直接绑定目标 HTML 文件，绕过工作区路径识别问题，适用于单页快速验证。
1、确保已将项目文件夹通过文件 → 打开文件夹方式载入 VSCode，而非仅拖入单个 HTML 文件。
2、在左侧资源管理器中，右键单击一个已保存的 .html 文件（如 index.html）。
3、从上下文菜单中选择Open with Live Server。
4、VSCode 右下角将显示类似Live Server: http://127.0.0.1:5500/的提示，并自动在默认浏览器中打开该地址。
5、此后修改该 HTML 或其同级目录下的 CSS、JS 文件并保存，浏览器将自动刷新。
三、使用命令面板手动触发
当右键菜单未出现或状态栏按钮无响应时，命令面板提供最底层调用路径，强制初始化服务实例。
1、按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS）打开命令面板。
2、输入Live Server: Start，从下拉列表中选择该项并回车。
3、若当前编辑器未打开 HTML 文件，系统将弹出文件选择框，请从中选取一个已保存的.html 文件。
4、服务启动后，状态栏显示端口信息，浏览器自动加载对应 URL；此后对该文件及其监听范围内的资源保存均触发刷新。
四、配置自定义端口与根目录
当默认端口 5500 被占用，或 HTML 文件位于子目录（如 src/pages/）时，必须显式指定服务起始点，否则路径解析失败导致 404 或不刷新。
1、在项目根目录下新建文件夹.vscode（注意开头为英文点号）。
2、在该文件夹内创建文件settings.json。
3、写入以下内容（示例：端口改为 3000，根目录设为 src/）：
{
"liveServer.settings.port": 3000,
"liveServer.settings.root": "./src",
"liveServer.settings.NoBrowser": false
}
4、保存后重启 VSCode 或重新执行启动操作，服务将以新配置运行。
五、禁用浏览器缓存确保更新可见
即使 Live Server 正常工作，浏览器缓存仍可能掩盖 CSS 或 JS 的修改效果，尤其在开发者工具未开启时极易误判为插件失效。
1、在浏览器中打开 Live Server 启动的页面（地址必须以http://开头，不可为 file://）。
2、按下F12打开开发者工具，切换至Network标签页。
3、勾选Disable cache (while DevTools is open)选项。
4、此后所有资源请求均绕过缓存，真实反映文件修改结果。
