Sublime Text 本身不支持浏览器实时同步,所有“保存即刷新”必须依赖外部 HTTP 服务(如 BrowserSync);file:// 协议下因浏览器禁用脚本注入与跨域,View In Browser、LiveReload 等全部失效。

Sublime Text 本身不支持浏览器实时同步,所有“保存即刷新”效果都依赖外部服务;直接装插件、点右键、按F5,99% 的情况不会自动刷新——根本原因是浏览器在 file:// 协议下禁用脚本注入和跨域请求,LiveReload、View In Browser 等插件在此协议下全部失效。
BrowserSync 必须通过 HTTP 启动,不能走 file://
BrowserSync 不是 Sublime 插件,而是一个 Node.js 命令行工具。它起作用的前提是:页面必须通过 http://localhost:3000 这类地址访问,而非双击 HTML 文件或右键 View in Browser 生成的 file:///xxx/index.html 路径。
- 运行前先确认已安装 Node.js:
node -v和npm -v应返回版本号 - 全局安装:
npm install -g browser-sync - 进入项目根目录(即包含
index.html的文件夹),执行:browser-sync start --server --files "*.html, *.css, *.js" - 此时终端会输出类似
Local: http://localhost:3000的地址,用浏览器打开这个链接才有效 - 修改任意匹配后缀的文件并保存,页面立即刷新;改错路径或漏掉
--server参数,服务根本起不来
--files 参数必须显式写对,否则监听失效
BrowserSync 默认不递归监听子目录,"*.css" 只匹配项目根目录下的 CSS 文件,src/css/style.css 就不会被触发刷新。
- 要监听所有层级的 CSS/JS/HTML,写成:
"**/*.css, **/*.js, **/*.html" - 路径通配符
**是关键,不是可选项;漏掉会导致“改了文件但页面没反应” - 多个后缀之间用英文逗号+空格分隔,
"*.html,*.css"(无空格)在某些 shell 下会解析失败 - 如果项目里有构建产物(如
dist/),建议监听输出目录:"dist/**/*.html, dist/**/*.css"
想让手机也同步预览,--host 0.0.0.0 不可省略
默认 browser-sync start --server 只绑定 127.0.0.1,手机无法访问。要实现局域网内多设备同步,必须显式放开监听地址。
立即学习“前端免费学习笔记(深入)”;
- 启动命令加
--host 0.0.0.0 --port 3000,例如:browser-sync start --server --files "**/*.html, **/*.css" --host 0.0.0.0 --port 3000 - 终端会额外输出
External: http://192.168.x.x:3000,手机浏览器访问这个地址即可 - 部分公司 Wi-Fi 或防火墙会拦截端口,若打不开,换端口试试(如
--port 4000) - 确保手机和电脑在同一局域网;手机连的是 5G 热点?那就不在同一个网段,同步无效
最容易被忽略的一点:Sublime 的保存行为本身必须可靠。很多人开了 BrowserSync 却仍要手动刷新,其实是 Sublime 没真保存——比如忘了关 save_on_focus_lost,切到浏览器时文件还停留在未保存状态;或者用了某些快捷键(如 Ctrl+S 但光标不在编辑区)导致保存失败。BrowserSync 只监听磁盘文件变化,它不管 Sublime 是否“以为自己保存了”。


















