Sublime Text 无法直接实时同步代码到手机浏览器,需通过局域网服务实现:推荐用 http-server 启动静态服务(npm install -g http-server,项目根目录运行 http-server -p 8080 -c-1),手机访问电脑局域网IP加端口;如需自动刷新,改用 BrowserSync(npm install -g browser-sync,运行时加 --host 0.0.0.0);务必使用正确的Wi-Fi网卡IPv4地址,而非localhost或虚拟网卡IP。

Sublime Text 怎么把代码实时同步到手机浏览器预览
不能直接同步,必须借助局域网服务 + 手机访问。Sublime 本身没有内置 HTTP 服务器或热重载功能,得靠外部工具桥接。
用 http-server 启动本地静态服务(推荐)
这是最轻量、兼容性最好、无需改 Sublime 配置的方式。适用于 HTML/CSS/JS 静态项目。
- 确保已安装 Node.js,然后全局安装:
npm install -g http-server
- 在项目根目录(含
index.html)终端执行:http-server -p 8080 -c-1
(-c-1禁用缓存,避免手机看到旧版本) - 手机和电脑连同一 Wi-Fi,在浏览器输入:
http://:8080(如http://192.168.1.102:8080) - 每次保存 Sublime 中的文件后,手动刷新手机页面即可——如果想自动刷新,得加额外工具(见下一条)
配合 BrowserSync 实现保存即刷新(含手机)
比 http-server 多一步配置,但能真正“同步预览”:Sublime 里一保存,手机和电脑浏览器自动刷新,还支持滚动同步、点击同步。
- 安装:
npm install -g browser-sync
- 在项目根目录运行:
browser-sync start --server --files "*.html, *.css, *.js" --host 0.0.0.0 --port 3000
(--host 0.0.0.0是关键,让手机能访问) - 终端会输出两个地址:
Local:(本机)和External:(局域网 IP),手机访问后者即可,例如http://192.168.1.102:3000 - 注意:某些路由器或 Windows 防火墙会拦截 3000 端口,可换端口(如
--port 8081)并确认防火墙放行
为什么不用 Sublime 插件自带的“实时预览”?
像 SublimeServer 或 LiveReload 这类插件,大多只监听文件变化、触发浏览器刷新,但它们依赖你本地已打开的 Chrome/Firefox,并且默认不对外提供局域网访问能力。手机无法连接,除非你手动配置 Python 的 http.server 并绑定 0.0.0.0,但稳定性不如 http-server 或 BrowserSync。
真正容易被忽略的是:手机访问时,必须用电脑的局域网 IP,而不是 localhost 或 127.0.0.1;而很多人查 IP 时错用了 VMware 或 Docker 的虚拟网卡地址,结果手机连不通——务必在命令行用 ipconfig(Windows)或 ifconfig(macOS/Linux)找标着“Wi-Fi”或“en0”的那个 IPv4 地址。










