讲师中心 微信公众号
AI工具推荐 视频效率加速

Sublime Text快速集成Web服务器热重载

夏雪大大_5855

夏雪大大_5855

发布时间:2026-10-28 07:41:50

|

893人浏览过

|

来源于php中文网

原创

LiveReload CLI 必须全局安装并运行,Sublime插件仅触发通知;浏览器扩展需启用且端口、协议(http://)、文件类型(含css)三者严格一致;Markdown预览依赖SimpleReloadPlugin调用markdown_preview命令。

sublime text快速集成web服务器热重载

LiveReload CLI 必须先跑起来,否则插件只是个摆设

Sublime Text 自身不提供 WebSocket 服务,LiveReload 插件(如 dwieeb 版)在 ST4 上已静默失效,ST3 上也仅是“保存时发通知”的监听器——它不建连接、不广播变更、不监听文件。真正干活的是 Node.js 实现的 livereload CLI 工具。

必须执行:

  • npm install -g livereload
  • 在项目根目录运行:livereload . --port 35729 --exts html,css,js,md
  • --exts 必须显式包含 css,否则改样式不会触发刷新
  • 若提示 EADDRINUSE,换端口(如 --port 35730),并同步更新浏览器扩展的 Options 设置

浏览器扩展只认 http://,file:// 协议下直接失效

Chrome / Edge 必须安装官方 LiveReload 扩展(图标是黑白靶心,开发者为 LiveReload.com),其他同名插件大多无效。安装后需手动点击地址栏旁图标,使其变为实心状态,并确认右下角显示 LiveReload is connected。

硬性限制:

  • 页面必须通过 http://localhost:8000/xxx.html 这类地址打开,file:// 协议下扩展会被浏览器直接禁用
  • 若页面已在浏览器中打开后再装扩展,需手动按 Ctrl+R 重载一次,让注入脚本生效
  • 扩展设置里要勾选 Allow access to file URLs(仅对本地调试必要,但非充分条件)

SublimeServer 和 LiveReload 不是一回事,别混用

SublimeServer 是纯静态 HTTP 服务器,启动后把当前项目映射为 http://localhost:8080/,适合快速预览 HTML/CSS/JS,但它不监听文件变化,也不触发自动刷新。

Sublime Text Build Linux版
Sublime Text Build Linux版

Sublime Text Linux x86-64 deb 安装包。官方也提供 rpm、tar.xz 和软件源安装方式。

下载

而 LiveReload 的核心价值是「保存即刷新」:它依赖 CLI 建立 WebSocket,靠浏览器扩展注入脚本监听变更。两者目标不同:

  • 需要静态服务 + 手动刷新 → 用 SublimeServer(右键 → View in SublimeServer)
  • 需要保存后秒级自动刷新 → 必须配 livereload CLI + 浏览器扩展
  • 想同时满足?开两个终端:一个跑 livereload,一个跑 python -m http.server 8000 或 SublimeServer,但后者不参与热重载链路

Markdown 预览要绕过默认逻辑,靠 SimpleReloadPlugin

livereload CLI 默认不处理 .md 文件,因为 Markdown 不是可直接渲染的 HTML。真正起作用的是 Markdown Preview 插件把内容转成临时 HTML 后,再由 SimpleReloadPlugin 触发刷新。

配置路径:Preferences → Package Settings → LiveReload → Settings – User,填入:

{
  "enabled_plugins": ["SimpleReloadPlugin"],
  "SimpleReloadPlugin": {
    "paths": ["*.md"],
    "command": "markdown_preview",
    "args": {
      "target": "browser",
      "parser": "markdown"
    }
  }
}

注意:"command" 必须是 markdown_preview(全小写 + 下划线),写成 MarkdownPreview 或 markdownPreview 都无效。

最容易被忽略的点:所有环节的协议、端口、文件扩展名、插件启用状态必须全部对齐。少一个,热重载就断在某一层——不是插件没装,而是链路里某个齿轮没咬合上。

热门AI工具

更多
WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

Seko
Seko Hot

一款AI视频创作工具,主要用于商汤科技推出的创编一体的AI短视频创作Agent,适合需要提升相关任务效率的用户。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

相关专题

更多
服务器是什么
服务器是什么

服务器是一种计算机硬件设备或软件程序,它具有强大的计算和存储能力,用请求、存储数据和提供服务。它在互联网中着关重要的作用,为用户提供各种服务和资源。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

457

2023.08.15

连接apple id服务器时出错
连接apple id服务器时出错

连接apple id服务器时出错的原因包括网络连接问题、服务器问题、Apple ID账户问题、设备问题、防火墙或安全软件问题、时间和日期设置问题、Apple服务器维护等。本专题为大家提供apple id相关的文章、下载、课程内容,供大家免费下载体验。

960

2023.09.08

搭建互联网服务器
搭建互联网服务器

搭建互联网服务器需要:1、选择合适的硬件和操作系统,第一步是选择合适的硬件和操作系统;2、安装和配置操作系统,是搭建互联网服务器的关键步骤;3、安装和配置服务器软件,是搭建互联网服务器的下一步,常见的服务器软件包括Apache、Nginx、Tomcat等;4、配置防火墙和安全性,是搭建互联网服务器的重要步骤;5、域名解析和配置,是搭建互联网服务器的最后一步。

3232

2023.09.19

如何查看服务器状态
如何查看服务器状态

查看服务器状态的方法有使用命令行工具、图形界面工具、监控工具、日志文件和远程管理工具等。本专题为大家提供服务器状态相关的文章、下载、课程内容,供大家免费下载体验。

1056

2023.10.09

服务器域名转接慢怎么解决
服务器域名转接慢怎么解决

服务器域名转接慢的解决办法有DNS优化、服务器优化、CDN加速、前端优化和网络优化等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

949

2023.10.17

服务器评测软件
服务器评测软件

服务器评测软件有PassMark Software、CPU-Z、GPU-Z、CrystalDiskMark、IOmeter、JMeter、LoadRunner、Apache Bench等等。详细介绍:1、PassMark Software是一款综合性的服务器性能测试软件,可以评估服务器在各种负载条件下的性能;2、CPU-Z是一款可以提供服务器CPU详细信息的软件等等。

494

2023.10.17

如何开启TFTP服务器
如何开启TFTP服务器

开启TFTP服务器的步骤包括选择TFTP服务器软件、下载和安装软件、配置TFTP服务器以及启动和测试服务器等。本专题为大家提供服务器相关的文章、下载、课程内容,供大家免费下载体验。

2956

2023.10.18

服务器负载不兼容怎么解决
服务器负载不兼容怎么解决

解决方法:1、增加服务器资源;2、负载均衡;3、优化应用程序;4、增加缓存机制;5、分布式架构;6、限流和熔断;7、自动化扩容。想知道更详细服务器负载不兼容的解决方法,可以访问本专题下面的文章。

5552

2023.10.20

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn