Sublime Text 无法支持 Vite-Ruby,因其是纯文本编辑器,无 Node.js 运行时、不启动 Vite 服务、不解析 HMR 事件,热重载完全依赖终端中运行的 bin/vite dev 进程,Sublime 仅负责保存文件。

Sublime Text 本身不支持 Vite-Ruby,也没有官方或成熟社区方案能将 Vite 的热重载能力“嫁接”进 Rails 前端模块——这不是配置问题,而是技术栈不兼容。
为什么 Vite-Ruby 在 Sublime 中无法工作
Vite-Ruby 是一个实验性、非主流的 gem,它试图在 Rails 中复用 Vite 的开发服务器和 HMR 机制,但实际依赖 Node.js 运行时、ESM 解析、以及 Vite 插件链(如 vite-plugin-ruby)。Sublime Text 是纯文本编辑器,没有运行时环境,也不参与构建流程;它既不启动 Vite 服务,也不解析或转发 HMR 事件。
常见误解是:装个插件就能让 Sublime “接管热重载”。事实是:热重载必须由终端中运行的 vite dev 或 bin/vite dev 进程驱动,Sublime 只负责保存文件——而保存动作是否触发重载,取决于 Vite 是否监听了对应路径(例如 app/javascript/)且未被 Rails 的 sprockets/propshaft 干扰。
- 你看到的“热重载生效”,其实是浏览器 DevTools 里出现
[vite] hot updated: /assets/application.js—— 这和 Sublime 无关 - 如果热重载失效,问题一定出在终端里的 Vite 进程、
vite.config.ts的server.watch配置、或 Rails asset pipeline 是否与 Vite 冲突 - Sublime 没有 API 让插件向 Vite 发送 reload 请求,也无 WebSocket 客户端能力去监听 HMR 事件
Sublime 能做的真实边界:只管保存,不管重载
Sublime 唯一可控的环节,是确保你修改 .js/.ts/.vue 文件后,能可靠地保存并通知底层构建系统。这要求:
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记(深入)”;
- 文件编码必须为 UTF-8(无 BOM),否则 Vite 可能解析失败,静默跳过 HMR
- 避免使用 Sublime 的“延迟写入”(atomic_save),它会先写临时文件再 rename,Vite 默认 watch 不到中间状态;应在
Preferences → Settings中设"atomic_save": false - 确认 Vite 配置中的
server.watch.ignored没把app/views/**或config/**错误加入——这些路径不该触发 JS 重载,但若误配会导致整个 watch 失效 - Mac 用户需注意:若用
rbenv+node-build管理 Node 版本,Sublime 启动方式必须是从已加载 shell 环境的终端执行subl .,否则which node在 Sublime 控制台里可能为空,影响后续脚本调用(比如自定义 build system 调npm run dev)
替代方案:用 Sublime 配合真正起作用的工具链
想在 Rails 项目中获得接近 Vite 的前端开发体验,应放弃“让 Sublime 支持 Vite-Ruby”,转而用 Sublime 高效配合已验证的组合:
- 终端里始终运行
bin/vite dev(不是rails server),浏览器访问http://localhost:3030(Vite 默认端口),而非:3000 - 在 Sublime 中用
SideBarEnhancements右键 →Open in Terminal快速进入项目根目录,避免切窗口找终端 - 用
Terminus插件内嵌终端,分栏固定运行bin/vite dev和rails console,Sublime 就变成专注编码的“输入设备” - 对 .vue 文件启用
Volar(通过 VS Code 借鉴而来,Sublime 无原生支持,但可用Vue Syntax Highlight+ 手动语言模式切换)
真正的热重载瓶颈从来不在编辑器,而在 Vite 配置是否干净、Rails 是否禁用了冲突的 asset handler、以及浏览器是否缓存了旧的 manifest.json。Sublime 做好保存、路径识别、语法高亮这三件事,就已经尽到本分。

















