livereload 实时刷新需三端对齐:sublime 插件监听文件保存并通知、浏览器扩展接收通知并刷新、http 服务提供 websocket 通信;缺一不可,且端口、扩展名、协议(必须 http)须严格一致。

LiveReload 不是 Sublime 插件,而是「通知+响应」协作链
Sublime Text 本身不支持 LiveReload 协议,所谓“安装 LiveReload 插件”只是装了个监听器——它只负责在你保存 .html、.css 等文件时,向浏览器发个通知;真正执行刷新的,必须是浏览器端的扩展或本地服务。
- 没装 Chrome 的 LiveReload 扩展(图标是黑白靶心,开发者为 LiveReload.com),
livereloadCLI 或 Sublime 插件发的通知就没人接收,页面绝不会动 - 页面已打开后再装扩展,需手动按
Ctrl+R(Windows)或Cmd+R(macOS)重载一次,否则注入脚本不生效 - Sublime 的
LiveReload插件启用后,菜单路径是Tools → Packages → LiveReload → Enable: Simple Reload via Browser Extension,不是“自动开启”,必须手动点一次
端口不一致 = 白配,--port 必须和浏览器插件对齐
默认端口是 35729,但这个值在 Sublime 插件、CLI 命令、浏览器扩展三处都得一致,漏改一个就断连。
- 用
livereloadCLI 启动时加--port 35730,就得进 Chrome 扩展设置里把端口也改成35730 - 如果提示
EADDRINUSE,说明端口被占,换35730或35731更稳妥 - Sublime 插件配置中可设
"port": 35730(路径:Preferences → Package Settings → LiveReload → Settings – User),但改了之后要重启监听(先Disable再Enable)
改了 CSS 不刷新?大概率是 --exts 没覆盖到
livereload CLI 默认只监听 .html 和 .htm,如果你改的是 .css 或 .js,不显式声明扩展名,它根本不会发通知。
- 启动命令要写全:
livereload . --exts "html,css,js"(注意引号和逗号无空格) - Sublime 的 LiveReload 插件也依赖这个配置,若用插件而非 CLI,需在插件设置里加
"extensions": ["html", "css", "js"] - 用
browser-sync替代时,--files "*.html, *.css, *.js"同样要显式列出,漏掉css就不会热更新样式
别信“直接拖 HTML 到浏览器就能自动刷新”
现代浏览器出于安全限制,对 file:// 协议下的本地 HTML 文件禁用 WebSocket 和跨域请求——而 LiveReload 依赖 WebSocket 通信。这意味着:
- 直接双击打开
index.html,即使 LiveReload 图标已点亮,也永远不会刷新 - 必须通过 HTTP 服务访问,比如
python -m http.server 8000后打开http://localhost:8000/index.html - 或者用
live-server、browser-sync这类带服务器能力的工具,它们天然绕过file://限制











