sublime text 本身不支持实时预览,必须依赖外部http服务(如python -m http.server)+浏览器扩展(如livereload)或工具(如browsersync)协同工作;file://协议下所有自动刷新方案均失效。

Sublime Text 本身不支持“改完代码即刻查看效果”,所有所谓实时预览都依赖外部服务或浏览器扩展协同工作;没起 HTTP 服务、没配对浏览器监听、没启用插件命令,保存后页面必然不会自动刷新。
View in Browser 只负责“打开一次”,不是 Live Server
它调用系统命令打开 file:// 路径的 HTML 文件,不监听文件变化,也不注入刷新脚本。常见错误现象包括:
- 右键菜单点了
View in Browser,浏览器打开了,但改完保存后必须手动按F5 - 页面空白或控制台报
net::ERR_FILE_NOT_FOUND或Access to script at 'file://...' from origin 'null' has been blocked——这是 Chrome 等现代浏览器对file://协议的默认限制 - 想用内置服务器?右键 →
View in Browser → Start Server,它会起http://localhost:8080,但仅限当前文件所在目录,且不监听子目录变动
LiveReload 插件只发信号,不干刷新的事
Sublime 的 LiveReload 插件本质是向 localhost:35729 发一个 POST /changed 请求,真正刷新靠 Chrome 扩展完成。关键前提有三个:
- Chrome 必须已安装官方
LiveReload扩展,并在当前页面地址栏点击图标,使其变为实心(表示已启用) - 当前页面必须通过
http://或https://打开,file://下扩展直接禁用 - Sublime 中必须手动执行
LiveReload: Enable/Disable(Ctrl+Shift+P输入),否则插件根本不监听文件变化 - 插件设置里
"enabled_plugins"至少包含"SimpleRefresh",否则只发请求、不触发刷新逻辑
BrowserSync 是目前最稳的本地实时方案
它自带 HTTP 服务器、文件监听、自动注入刷新脚本,无需浏览器扩展,Sublime 保存即生效。实操要点:
- 先全局安装:
npm install -g browser-sync(确认node -v可用) - 进项目根目录运行:
browser-sync start --server --files "*.html, *.css, *.js" - 浏览器访问
http://localhost:3000,此后任意保存匹配后缀的文件,页面立即刷新 -
--files参数必须显式指定后缀;若 CSS 在css/子目录下,需写成"css/*.css"或"**/*.css"(后者支持递归) - 配合 Sublime 设置
"save_on_focus_lost": true,切出编辑器时自动保存,减少手动操作
新手最简组合:Python http.server + Open In Browser
不装 Node.js、不配扩展、不改设置,三步跑起来,适合纯静态页面快速验证:
- 确保系统有 Python 3.6+,在 HTML 所在目录终端运行:
python -m http.server 8000 - 用 Package Control 安装
Open In Browser插件 - 右键编辑区 →
Open In Browser,或设快捷键(如Alt+Shift+O),自动打开http://localhost:8000/index.html - 唯一硬性限制:所有资源(图片、JS、CSS)必须放在同一目录或子目录下,且引用路径不能含
file://;否则控制台会报 CORS 或net::ERR_FILE_NOT_FOUND
最容易被忽略的是协议问题:所有自动刷新方案都要求页面走 http://,而非 file://。哪怕插件装得再全、快捷键绑得再顺,只要浏览器地址栏开头是 file:///,就注定不会自动刷新。











