livereload 在手机上完全失效,因其依赖桌面浏览器扩展和 localhost 通信,手机无扩展且无法访问 127.0.0.1;推荐使用 browsersync(自动同步)或 http-server(手动刷新、轻量可靠)。

Sublime Text 本身无法直接同步代码到手机浏览器,LiveReload 插件在移动端调试中根本不起作用——它只负责向已打开的桌面 Chrome/Firefox 发送刷新指令,不提供 HTTP 服务、不监听局域网请求、也不支持手机访问。
为什么 LiveReload 在手机上“完全失效”
LiveReload 是一个三端协作机制:Sublime 插件(仅发通知)、浏览器扩展(监听 WebSocket)、服务端(livereload CLI)。但它的设计目标是桌面开发,所有通信都基于 localhost 和默认端口 35729,且依赖浏览器扩展主动连接。而手机浏览器既没有 LiveReload 扩展,也无法访问 Sublime 所在机器的本地回环地址。你看到的“保存后手机页面没反应”,不是配置错了,是协议层就不支持。
- Chrome 扩展只运行在桌面 Chrome 中,iOS Safari / Android Chrome 均无对应扩展
-
livereloadCLI 默认绑定127.0.0.1,手机无法通过 Wi-Fi 访问该地址 - 即使手动改
--host 0.0.0.0,WebSocket 连接仍需浏览器端扩展配合,手机端无此能力 - Sublime 的 LiveReload 插件在 ST4 中已停止维护,多数用户实际运行的是空逻辑
真正能用的移动端同步方案:BrowserSync
BrowserSync 是目前唯一能在 Sublime 工作流中稳定支撑手机预览的工具。它自带 HTTP 服务器、文件监听、跨设备刷新和滚动/点击同步,且不依赖任何 Sublime 插件——你只需在终端启动它,Sublime 里保存文件,手机和电脑就同时刷新。
- 全局安装:
npm install -g browser-sync(确认已装 Node.js) - 在项目根目录执行:
browser-sync start --server --files "*.html,*.css,*.js" --host 0.0.0.0 --port 3000 - 终端输出的
External地址就是手机要访问的 URL,形如http://192.168.1.102:3000 - 务必关闭 Windows 防火墙或放行
3000端口;Mac 用户注意系统偏好设置 → 防火墙 → 允许浏览器访问 - 手机和电脑必须连同一 Wi-Fi,不能是个人热点或不同子网
如果只想快速看效果,用 http-server 更轻量
不需要自动刷新?只要能打开最新 HTML/CSS/JS 就行?http-server 是更干净的选择:零配置、无依赖、禁用缓存可靠,适合文档、原型、静态页验证。
- 安装:
npm install -g http-server - 启动:
http-server -p 8080 -c-1(-c-1强制禁用所有缓存) - 手机访问:
http://:8080,每次保存后手动下拉刷新即可 - 查本机 IP:macOS/Linux 执行
ifconfig | grep "inet " | grep -v 127.0.0.1;Windows 执行ipconfig找 IPv4 地址 - 别用
python -m http.server:Python 3.12+ 默认绑定127.0.0.1,手机访问会拒绝连接
LiveReload 插件对移动端调试毫无意义,强行配置只会浪费时间。BrowserSync 或 http-server 才是真实可用的路径——前者重在“同步”,后者重在“可见”,选哪个取决于你是否需要保存即刷新。记住:手机访问的前提永远是服务暴露在局域网 IP 上,而不是 localhost。











