LiveReload 在 Sublime Text 中需 CLI 工具 + 浏览器扩展协同工作:用 npm install -g livereload 启动服务,Chrome 安装官方 LiveReload 扩展并确保端口一致、HTTP 协议访问,Sublime 无需插件即可联动。

LiveReload 插件在 Sublime Text 里根本不能直接用
Sublime Text 本身不支持 LiveReload 协议,所谓“安装 LiveReload 插件”实际是装一个触发器——它只负责监听文件变化并发送通知,真正的刷新逻辑必须靠浏览器端的扩展或本地服务来响应。
常见错误现象:livereload 命令报错、保存后页面没反应、控制台出现 WebSocket connection to 'ws://localhost:35729/livereload' failed。
- 别去搜
SublimeLinter-LiveReload或类似名字的插件——那是给 SublimeLinter 用的,和实时刷新无关 - 官方推荐路径是:Sublime +
livereloadCLI 工具(Node.js) + 浏览器插件,三者配合 - 如果你用的是 Sublime Text 4,
Package Control里搜到的LiveReload插件(作者是 dwieeb)仅支持 ST3,ST4 上会静默失效
用 npm 装 livereload CLI 并启动服务
这是最稳定、兼容性最好的方式。它绕过 Sublime 插件的限制,让 Sublime 只做编辑器本职工作,刷新交给独立进程。
执行命令前确保已安装 Node.js:
立即学习“前端免费学习笔记(深入)”;
npm install -g livereload
然后在你的项目根目录运行:
livereload . --port 35729 --exts html,css,js,md
-
--port必须和浏览器插件默认端口一致,否则连不上;改端口需同步在插件设置里调整 -
--exts指定监听的文件类型,漏掉css就会导致样式修改不刷新 - 不要加
--no-browser——这个参数会让服务不自动打开页面,但 Sublime 不管这事,它只管保存文件 - 如果提示
EADDRINUSE,说明端口被占,换 35730 试试,同时更新浏览器插件配置
Chrome / Edge 必须装官方 LiveReload 扩展
没有这个扩展,livereload CLI 发出的通知就没人接收,页面自然不会刷新。
去 Chrome 网上应用店搜 LiveReload,认准图标是黑白靶心、开发者为 LiveReload.com 的那个。安装后点击图标,打开开关,并确认右下角显示 “LiveReload is connected”。
- 扩展默认监听
localhost:35729,如果你改了 CLI 的--port,必须点扩展图标 → Options → 把 port 改成对应值 - 网页必须通过
http://或https://打开,file://协议下扩展会被浏览器禁用,这是安全策略,改不了 - 如果页面已打开再装扩展,需要手动按
Cmd+R(macOS)或Ctrl+R(Windows)重载一次,让注入脚本生效
Sublime 里不用装插件也能联动,但得配好构建系统
想让保存即触发刷新,又不想依赖第三方 Sublime 插件?用内置的 Build System 更轻量、更可控。
新建 Tools → Build System → New Build System,填入:
{
"shell_cmd": "livereload . --port 35729 --exts html,css,js --quiet &",
"working_dir": "$project_path",
"variants": [
{
"name": "Stop",
"shell_cmd": "kill $(lsof -t -i :35729)"
}
]
}
保存为 LiveReload.sublime-build,之后按 Cmd+B(macOS)或 Ctrl+B(Windows)就能启停服务。
-
--quiet防止终端刷屏干扰,日志其实写在后台,不用管 -
kill $(lsof -t -i :35729)是 macOS 写法;Windows 用户得换成taskkill /F /IM node.exe,但会杀掉所有 node 进程——慎用 - 这个方案不监听保存事件,它只是把 CLI 封装进构建流程,真正实现“保存即刷新”的还是前面说的 CLI + 浏览器扩展组合
最容易被忽略的一点:所有环节都依赖时间同步——Sublime 保存文件、CLI 捕获变更、WebSocket 推送、浏览器执行 location.reload(),中间任意一环延迟或失败,都会表现为“好像没刷新”。建议先关掉其他可能监听文件的工具(比如 Webpack Dev Server、Vite 的 HMR),避免端口冲突或事件劫持。










