手机无法访问 Sublime 代码是因浏览器禁用 file:// 协议且 localhost 为本机地址;唯一可行方案是通过 http-server 或 browser-sync 启动局域网 HTTP 服务,用电脑真实 IPv4 地址(如 192.168.1.102)在手机访问。

Sublime Text 本身不能直接把代码推到手机浏览器预览,必须靠局域网 HTTP 服务中转;file:// 协议下手机打不开、刷不出、连不上,这是浏览器安全机制决定的,不是配置问题。
为什么手机访问不了 localhost 或 file://
Chrome、Safari 在手机端完全禁用 file:// 协议下的脚本执行和资源加载——CSS 不生效、JS 报错、图片 404,连 fetch() 都被拦死。而 localhost 是电脑本机回环地址,手机根本解析不到。唯一可行路径是:让 Sublime 项目通过 HTTP 服务暴露在局域网里,手机用电脑的真实 IPv4 地址访问。
- 必须确认手机和电脑连的是同一个 Wi-Fi(不是 5G 热点、不是双频 Wi-Fi 的 2.4G/5G 分离)
- Windows 用户要关掉“专用网络”防火墙,或手动放行对应端口(如 3000、8080)
- Mac 用户需在「系统设置 → 网络 → 高级 → 防火墙」里允许传入连接
- 路由器开启 AP 隔离会彻底断掉设备间通信,需关闭
用 http-server 最快启动静态服务
http-server 是最轻量、零配置、兼容性最好的选择,适合纯 HTML/CSS/JS 项目,不依赖 Sublime 插件,也不需要改任何设置。
- 先装 Node.js(
node -v和npm -v能输出版本号才算成功) - 全局安装:
npm install -g http-server - 终端进入项目根目录(含
index.html),运行:http-server -p 8080 -c-1(-c-1强制禁用缓存,避免手机看到旧 CSS) - 在终端输出的地址里找 IPv4 行,比如
Available on: http://192.168.1.102:8080,手机浏览器输入这个完整地址
每次保存 Sublime 文件后,手动刷新手机页面即可。不需要插件、不卡顿、不报错。
用 browser-sync 实现保存即刷新(含手机)
如果想手机和电脑同时自动刷新,browser-sync 是目前最稳的方案,但它对命令参数极其敏感,漏一个就白跑。
- 安装:
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不可省略,否则手机无法访问;**/*.css中的**也不能少,否则子目录里的文件改了不触发刷新 - 终端会输出
External:开头的地址,例如http://192.168.1.102:3000,手机访问这个,不是Local:那个 - 若打不开,换端口试试(如
--port 4000),并检查 Windows 防火墙是否拦截
Live Server 插件适合不想碰命令行的人
如果你不想开终端、不装 Node.js,Live Server 是唯一真正免配置的替代方案——它是 Python 写的,不依赖 npm,右键就能起服务。
- 用 Package Control 安装插件时,搜
Live Server(注意大小写和空格) - 必须用
File → Open Folder打开整个项目文件夹,不能只打开单个 HTML - 右键 HTML 文件 →
Open with Live Server(不是 View in Browser) - 浏览器地址栏必须是
http://127.0.0.1:5500/这类,不是file://;手机不能直连这个地址,但你可以用它验证本地是否跑通 - 想手机同步?还得配合
http-server或browser-sync,Live Server 默认只绑定127.0.0.1
最容易被忽略的是:所有方案都要求你确认电脑的局域网 IPv4 地址——不是 127.0.0.1,不是虚拟机 IP,不是 169.254.x.x,得是形如 192.168.x.x 或 10.x.x.x 的真实地址。Windows 用 ipconfig,Mac 用 ifconfig | grep "inet ",一眼就能扫出来。


















