sublime text 无法原生实现实时预览，必须通过 http 服务（如 browsersync 或 python http.server）提供网页访问，file:// 协议下浏览器禁用跨域与刷新脚本，导致 view in browser 和 livereload 插件失效。
Sublime Text 本身不提供实时预览能力，所谓“保存即刷新”必须靠外部服务或浏览器扩展协同完成；直接装插件不配协议、不启服务、不点浏览器图标，99% 的尝试会无声失败。
为什么 View In Browser 插件点开页面却不自动刷新？
View In Browser 只是帮你用指定浏览器打开 file:// 路径的 HTML 文件，它不监听文件变化，也不触发刷新。浏览器在 file:// 协议下禁止跨域请求和 LiveReload 扩展注入，所以：
- 右键 → View in Browser 打开的是本地文件路径，修改保存后必须手动按
F5 - LiveReload / BrowserSync 类工具在
file://下完全失效（Chrome 控制台会报net::ERR_FILE_NOT_FOUND或被静默拦截） - 想让刷新自动发生，页面必须通过
http://localhost:xxxx这类 HTTP 协议访问
BrowserSync 是目前最稳的实时预览方案
它自带静态服务器、文件监听、自动注入刷新脚本，Sublime 只需保存文件就能触发全链路响应，无需浏览器扩展、不依赖插件配置。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 全局安装：
npm install -g browser-sync - 进项目根目录运行：
browser-sync start --server --files "*.html, *.css, *.js" - 浏览器访问
http://localhost:3000，此后 Sublime 中任意保存匹配后缀的文件，页面立即刷新 - 注意：
--files参数必须显式列出后缀，"*.css"不会匹配子目录里的 CSS，要写成"**/*.css" - 可配合 Sublime 设置
"save_on_focus_lost": true，切出编辑器时自动保存，进一步减少手动操作
LiveReload 插件为什么总没反应？
Sublime 的 LiveReload 插件不是“刷新器”，只是个“发信号的按钮”：它监听文件变化后，向 localhost:35729 发一个 POST /changed 请求。真正干活的是 Chrome 扩展——但它有三个硬性前提：
- Chrome 必须已安装官方 LiveReload 扩展，并在当前页面地址栏点击其图标，使其变为实心（表示已启用）
- 当前页面必须通过
http://或https://打开，file://路径下扩展直接禁用 - Sublime 中必须手动执行
LiveReload: Enable/Disable（Ctrl+Shift+P输入），否则插件根本不监听 - 插件设置中
"enabled_plugins"至少包含"SimpleRefresh"，否则只发请求、不触发刷新逻辑
新手最简组合：Python http.server + Open In Browser
不装 Node.js、不配扩展、不改设置，三步跑起来，适合纯静态页面快速验证：
- 确保系统有 Python 3.6+，在 HTML 所在目录终端运行：
python -m http.server 8000 - 安装
Open In Browser插件（Ctrl+Shift+P→Install Package→ 搜该名） - 右键编辑区 →
Open In Browser，或设快捷键（如Alt+Shift+O），自动打开http://localhost:8000/index.html - 唯一限制：所有资源（图片、CSS、JS）必须放在同一目录或子目录下，且 HTML 中引用路径不能含
file://，否则控制台报 CORS 或 404
真正卡住人的从来不是“怎么配”，而是搞不清哪一环在负责哪件事——比如把刷新责任错当成 Sublime 插件的义务，或以为 Chrome 扩展能绕过协议限制。HTTP 服务这层绕不过，得先立住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
