Sublime Text可通过配置Browser Sync实现保存后浏览器自动刷新，首先全局安装Browser Sync：npm install -g browser-sync，然后在Sublime中创建新构建系统，输入指定cmd、working_dir和selector的JSON配置，保存为BrowserSync.sublime-build，接着在项目中打开HTML文件并按Ctrl+B运行，Browser Sync将启动本地服务器并在文件保存时刷新页面，支持通过修改--server或使用--proxy适配不同项目结构，提升前端开发效率。

Sublime Text 本身不具备浏览器实时刷新功能，但可以通过配置外部工具 Browser Sync 实现保存代码后浏览器自动刷新。Browser Sync 是一个轻量级的 Node.js 工具，支持静态和动态网站的实时预览与多设备同步测试。

安装 Browser Sync

确保系统已安装 Node.js，然后通过 npm 全局安装 Browser Sync：

安装完成后，可在任意项目目录中启动服务。

在 Sublime 中配置 Build System

为了让 Sublime 在保存文件时触发 Browser Sync 刷新，需创建自定义构建系统：

{
  "cmd": ["browser-sync", "start", "--server", "--files", "*.html,css/*.css,js/*.js"],
  "working_dir": "$file_path",
  "selector": "text.html"
}

配置说明：

• cmd：启动 Browser Sync 命令，--files 指定监听的文件类型
• working_dir：在当前文件所在目录运行命令
• selector：让 Sublime 在打开 HTML 文件时自动选择该构建系统

使用方式

Browser Sync 会自动启动本地服务器（默认 http://localhost:3000），并在你保存 HTML、CSS 或 JS 文件时刷新浏览器。

进阶配置建议

• 若项目有特定入口目录（如 ./dist），可修改 --server 参数为 --server ./dist
• 支持代理动态网站：browser-sync start --proxy "yourlocal.dev" --files "*.php"
• 添加 --port 3001 可指定端口
• 配合 Gulp 或 Grunt 使用更灵活，但单独使用也足够轻便

基本上就这些。配置一次后，以后在任何项目中只需按 Ctrl+B 即可开启实时预览，提升前端开发效率。关键是确保路径正确、Browser Sync 已全局安装，且 Sublime 构建系统指向项目目录。

# css  # php  # html  # sublime  # js  # 前端  # node.js  # json  # node  # windows  # npm  # 浏览器  # gulp 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel API资源(Resource)怎么用_格式化Laravel API响应的最佳实践  如何在IIS中新建站点并配置端口与IP地址？  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  实例解析angularjs的filter过滤器  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  EditPlus中的正则表达式实战(5)  高防服务器租用如何选择配置与防御等级？  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  Laravel如何配置和使用缓存？（Redis代码示例）  Laravel如何使用withoutEvents方法临时禁用模型事件  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  html5的keygen标签为什么废弃_替代方案说明【解答】  JavaScript模板引擎Template.js使用详解  php增删改查怎么学_零基础入门php数据库操作必知基础【教程】  Java解压缩zip - 解压缩多个文件或文件夹实例  Laravel Vite是做什么的_Laravel前端资源打包工具Vite配置与使用  详解Android图表 MPAndroidChart折线图  Laravel Eloquent：优雅地将关联模型字段扁平化到主模型中  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  Laravel如何发送系统通知？（Notification渠道示例）  Android自定义listview布局实现上拉加载下拉刷新功能  Laravel模型事件有哪些_Laravel Model Event生命周期详解  Python制作简易注册登录系统  Laravel如何实现API版本控制_Laravel版本化API设计方案  如何登录建站主机？访问步骤全解析  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  JS碰撞运动实现方法详解  猪八戒网站制作视频,开发一个猪八戒网站，大约需要多少？或者自己请程序员，需要什么程序员，多少程序员能完成？  Laravel如何从数据库删除数据_Laravel destroy和delete方法区别  js实现获取鼠标当前的位置  如何快速配置高效服务器建站软件？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Laravel如何设置定时任务（Cron Job）_Laravel调度器与任务计划配置  Laravel如何使用Service Container和依赖注入？（代码示例）  如何获取PHP WAP自助建站系统源码？  如何在阿里云虚拟服务器快速搭建网站？  js实现点击每个li节点，都弹出其文本值及修改  高防网站服务器：DDoS防御与BGP线路的AI智能防护方案  如何批量查询域名的建站时间记录？  如何确保FTP站点访问权限与数据传输安全？  Laravel如何实现图片防盗链功能_Laravel中间件验证Referer来源请求【方案】  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  香港服务器网站生成指南：免费资源整合与高速稳定配置方案  laravel怎么通过契约（Contracts）编程_laravel契约（Contracts）编程方法  javascript中的数组方法有哪些_如何利用数组方法简化数据处理  活动邀请函制作网站有哪些,活动邀请函文案？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  EditPlus中的正则表达式 实战(2)  高端智能建站公司优选：品牌定制与SEO优化一站式服务