atom-live-server 插件实现html保存后自动刷新，需通过http://协议访问；它监听当前文件目录及子目录资源，不支持@import css变更，轻量但功能有限，快捷键失效常因系统或软件冲突。
Atom 怎么让 HTML 文件保存后自动在浏览器里刷新
靠的是 atom-live-server 插件，不是 Atom 自带功能，也不依赖系统级 HTTP 服务。它起一个本地最小 Web 服务器，监听文件变化，触发浏览器 location.reload() —— 所以必须用 http:// 协议打开页面，不能双击直接用 file:// 打开。
- 装插件前先关掉 Atom，用命令行执行：
apm install atom-live-server - 重启 Atom，打开任意 HTML 文件，按
Ctrl+Alt+L（Windows/Linux）或Cmd+Alt+L（macOS）启动服务 - 第一次运行会弹出浏览器新标签页，地址类似
http://localhost:3000/index.html，之后改完 HTML/CSS/JS 保存，页面就自动刷新 - 别手动改端口：插件默认用
3000，如果被占用会顺延到3001，但不会提示，容易误以为没生效
为什么改了 CSS 或 JS 但页面没刷新
常见原因是文件没被 atom-live-server 监听路径覆盖到 —— 它只监听当前打开的文件所在目录及其子目录。比如你在 /project/src/index.html 启动服务，但 CSS 放在 /project/assets/style.css，就不会触发刷新。
- 确保所有资源（
.html、.css、.js）都在同一项目根目录下，或至少是启动时那个 HTML 文件的父/子路径内 - 检查浏览器控制台有没有 404 报错，比如
GET http://localhost:3000/assets/style.css 404，说明路径不对，得调整引用或移动文件 -
atom-live-server不处理@import的 CSS 文件变更，只响应主 HTML 中<link>和<script></script>标签引入的资源
和 BrowserSync 比有什么区别
atom-live-server 是轻量替代，没 BrowserSync 那些高级功能，但也因此更少出问题。
- 不支持多设备同步（比如手机扫码看效果）、不支持 CSS 热替换（改 CSS 不重刷整个页面）、没有代理转发能力
- 不生成配置文件，没法自定义路由或 header，适合单页 HTML 快速验证，不适合复杂前端工程
- 启动快、内存占用低，Atom 卡顿时它通常还能跑；BrowserSync 要单独开终端、装全局 npm 包，对新手容易卡在权限或端口上
- 如果你已经用
npm start启了 React/Vue 脚手架，别再开atom-live-server，两个服务抢3000端口会冲突
Mac 上按快捷键没反应？检查这几个地方
不是插件坏了，大概率是快捷键被系统或其它软件劫持了。
- macOS 系统偏好设置 → 键盘 → 快捷键 → 输入法，确认没把
Cmd+Alt+L绑定成切换输入法 - Atom 设置 → Keybindings，搜
atom-live-server，看对应命令是否真绑定了快捷键；有时插件安装后没自动注册，要手动点右侧铅笔图标加一条 - 如果用 Karabiner-Elements 或其他键盘映射工具，它们可能拦截了组合键，临时禁用试试
- 快捷键只在 HTML 文件激活状态下有效，切到
style.css标签页再按就没反应
真正麻烦的是跨域请求或本地文件协议混用——一旦你从 file:// 手动打开 HTML，又在代码里用 fetch('./data.json')，浏览器直接报错，这时候再怎么刷新也没用。得从一开始就用 atom-live-server 提供的 http:// 地址访问。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
