live server是vscode中最稳的html/css/js实时预览方案,但需满足三个前提:以文件夹形式打开工作区、html文件已保存且扩展名为.html、浏览器访问必须使用http://而非file://协议。

Live Server 是目前 VSCode 里最稳的 HTML/CSS/JS 实时预览方案,但“点一下就动”只是表象;真要它可靠工作,必须满足三个前提:工作区是文件夹、HTML 已保存、浏览器走的是 http:// 协议而非 file://。
Live Server 点“Go Live”没反应?先确认工作区和文件状态
它不支持单个 HTML 文件拖进 VSCode 就启动。根本原因不是插件坏了,而是服务压根没被触发。
- 必须通过 文件 → 打开文件夹 加载整个项目,资源管理器里能看到
index.html和css/子目录 -
index.html必须已保存(不能是未命名的临时标签页),扩展名得是.html(.htm或.txt不认) - 右下角状态栏语言模式要是
HTML,不是Plain Text;点一下可切换 - 右键编辑器里的
index.html标签页 → 选Open with Live Server,比点状态栏Go Live更可靠
页面开了但 CSS/JS 没更新?90% 是浏览器缓存或路径错
Live Server 支持 CSS 热重载,但只负责发通知;浏览器愿不愿意重新拉取,得你来管。
- 保存
style.css后,VSCode 右上角应弹出Reloading CSS…提示——没有说明 Live Server 没监听到改动 - Chrome/Firefox 开发者工具 →
Network标签 → 勾选Disable cache(仅 DevTools 打开时生效) -
<link rel="stylesheet" href="css/style.css">对应的磁盘路径必须是./css/style.css,不是./assets/css/style.css - 避免多层
@import:嵌套@import的热更新在 Live Server 中不可靠
想在手机上看?改 host、查 IP、过防火墙三步缺一不可
默认 localhost 绑定只允许本机访问,手机连同一 Wi-Fi 也打不开,不是网络问题,是服务没对外暴露。
- VSCode 设置里搜
liveServer.settings.host,值改成0.0.0.0(不是localhost,也不是留空) -
liveServer.settings.port设为固定值,比如5500,别用0(自动选端口会导致手机书签失效) - 用电脑局域网 IP 访问,比如
http://192.168.1.105:5500;Windows 运行ipconfig,macOS 运行ifconfig | grep "inet " | grep -v 127.0.0.1 - Windows Defender 防火墙或 macOS 防火墙需放行该端口;部分路由器开启「AP 隔离」也会拦住,需关闭
为什么改了代码页面还是旧的?刷新逻辑有隐藏规则
Live Server 默认只监听 .html、.htm、.xhtml、.php 文件变更并触发整页刷新;.css 和 .js 的改动默认不刷新页面,只尝试热重载(且仅限部分场景)。
- 改完
script.js没反应?手动按Ctrl+Shift+R(Win/Linux)或Cmd+Shift+R(Mac)硬刷新 - 若用了
<base href="/>%EF%BC%8C%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E9%83%BD%E6%8C%89%E8%BF%99%E4%B8%AA%20base%20%E8%A7%A3%E6%9E%90%EF%BC%8C%E6%9E%81%E6%98%93%E5%AF%BC%E8%87%B4%20404%EF%BC%9B%E8%B0%83%E8%AF%95%E6%97%B6%E5%BB%BA%E8%AE%AE%E5%85%88%E5%88%A0%E6%8E%89 %0A - Live%20Server%20%E4%B8%8D%E5%A4%84%E7%90%86%E6%9E%84%E5%BB%BA%E6%B5%81%E7%A8%8B%EF%BC%9B%E5%A6%82%E6%9E%9C%E9%A1%B9%E7%9B%AE%E7%94%A8%E4%BA%86%20Vite/Webpack%EF%BC%8C%E5%88%AB%E5%90%8C%E6%97%B6%E5%BC%80%E5%AE%83%E2%80%94%E2%80%94%E7%AB%AF%E5%8F%A3%E5%86%B2%E7%AA%81%E3%80%81%E5%88%B7%E6%96%B0%E9%80%BB%E8%BE%91%E6%89%93%E6%9E%B6%EF%BC%8C%E5%A4%A7%E6%A6%82%E7%8E%87%E7%99%BD%E5%B1%8F %0A
- %E6%9F%90%E4%BA%9B%E5%AE%89%E5%85%A8%E6%8F%92%E4%BB%B6%EF%BC%88%E5%A6%82%20uBlock%20Origin%EF%BC%89%E4%BC%9A%E9%9D%99%E9%BB%98%E6%8B%A6%E6%88%AA%20
localhost%20%E6%B5%81%E9%87%8F%EF%BC%8C%E5%8F%AF%E4%B8%B4%E6%97%B6%E7%A6%81%E7%94%A8%E9%AA%8C%E8%AF%81 %0A
%E6%9C%80%E5%B8%B8%E8%A2%AB%E5%BF%BD%E7%95%A5%E7%9A%84%E4%B8%80%E7%82%B9%EF%BC%9ALive%20Server%20%E5%90%AF%E5%8A%A8%E5%90%8E%EF%BC%8C%E6%B5%8F%E8%A7%88%E5%99%A8%E5%9C%B0%E5%9D%80%E6%A0%8F%E5%BF%85%E9%A1%BB%E6%98%AF%20http://127.0.0.1:5500/xxx.html%20%E8%BF%99%E7%B1%BB%E6%A0%BC%E5%BC%8F%E3%80%82%E5%8F%AA%E8%A6%81%E7%9C%8B%E5%88%B0%20file:///%20%E5%BC%80%E5%A4%B4%EF%BC%8C%E5%B0%B1%E8%AF%B4%E6%98%8E%E4%BD%A0%E6%A0%B9%E6%9C%AC%E6%B2%A1%E7%94%A8%E4%B8%8A%E5%AE%83%E2%80%94%E2%80%94%E6%89%80%E6%9C%89%20fetch%E3%80%81ES%20module%E3%80%81%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E5%8A%A0%E8%BD%BD%E9%83%BD%E4%BC%9A%E5%9C%A8%E6%9A%97%E5%A4%84%E5%A4%B1%E8%B4%A5%EF%BC%8C%E8%80%8C%E4%BD%A0%E5%8F%AF%E8%83%BD%E8%BF%98%E8%A7%89%E5%BE%97%E2%80%9C%E9%A1%B5%E9%9D%A2%E8%83%BD%E6%98%BE%E7%A4%BA%EF%BC%8C%E5%BA%94%E8%AF%A5%E6%B2%A1%E9%97%AE%E9%A2%98%E2%80%9D%E3%80%82











