3 分钟跑通 Live Server前端本地实时预览配置详解【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server你刚改完一行 CSS切到浏览器按下 F5等它加载完再切回来继续改。这种来回切换是前端开发中最耗时间的动作之一。Live Server 是一个为 VS Code 提供本地实时预览服务器的扩展保存文件后浏览器会自动刷新。本文讲清安装、启动与基础配置核心流程三分钟完成。Live Server 的定位很直接一个跑在本地的开发服务器扩展服务于 HTML、CSS、JavaScript 这类前端页面场景。它不需要额外的构建步骤默认监听 5500 端口安装后从状态栏一次点击即可启停。它通过文件监听触发浏览器刷新主要面向静态页面配合浏览器扩展也能覆盖 PHP 等动态页面多根工作区也可以直接使用。左侧编辑代码右侧浏览器自动更新 三分钟跑通实时预览在 VS Code 扩展市场中搜索 Live Server 并安装安装完成后状态栏会出现 Live Server 的启停入口。用 VS Code 打开一个包含 HTML 文件的文件夹点击状态栏中的启动入口默认浏览器会自动打开对应页面地址形如http://127.0.0.1:5500/index.html。修改页面中引用的 CSS 或 HTML 并保存观察浏览器页面在保存瞬间自动刷新无需任何手动操作。⚙️ 真正会用到的场景改完样式不想手动刷新日常调样式时CSS 变更默认是直接注入页面的不会整页重载HTML、JS 变更才会触发整页刷新。改样式保存即可看到结果浏览器停留在原地表单里已输入的内容也不会被刷掉。想在手机上同步看效果确认手机与电脑在同一网络把liveServer.settings.useLocalIp设为 true然后在手机浏览器输入电脑的 IPv4 地址加端口例如http://192.168.1.5:5500。IPv4 地址用 ipconfigWindows或 ifconfigLinux/macOS查看。响应式布局在真机上验证时这步比截图对比省事。想用断点调试 JavaScript安装 Debugger for Chrome 扩展后把liveServer.settings.ChromeDebuggingAttachment设为 true。启动服务器后在调试面板选择 Attach to Chrome即可在当前已运行的浏览器实例里打断点、查看变量不用另开一个浏览器窗口。附加到 Chrome接管已打开的浏览器只想服务项目中的某个子目录工作区根目录文件很多、只想服务某个子目录时把liveServer.settings.root设为子目录相对路径如/src服务器只以该目录为根。多根工作区中直接右键 HTML 文件启动会自动选择对应工作区一般无需额外设置。 配置速查按用途分组配置可写在用户设置里全局生效写在项目根目录的.vscode/settings.json则只对当前项目生效更适合提交给团队共享。端口与网络默认端口被占用或需要在局域网内访问时使用。{ liveServer.settings.port: 0, liveServer.settings.useLocalIp: true }port设为 0 表示让系统随机分配空闲端口不再报端口冲突。文件监控与刷新行为控制哪些变更会触发刷新以及刷新前的等待时间。{ liveServer.settings.ignoreFiles: [**/*.scss, node_modules/**], liveServer.settings.wait: 500, liveServer.settings.fullReload: false }wait默认 100 毫秒调大可减少连续快速保存时的重复刷新fullReload设为 true 可关掉样式注入、统一整页刷新。服务器根目录把服务根切到子目录。{ liveServer.settings.root: /src }路径以/开头表示相对工作区的子路径。浏览器与协议指定启动用的浏览器或启用 HTTPS。{ liveServer.settings.CustomBrowser: chrome, liveServer.settings.NoBrowser: false }NoBrowser为 true 时只起服务、不打开浏览器适合手动控制打开时机。{ liveServer.settings.https: { enable: true, cert: /path/to/cert.pem, key: /path/to/key.pem, passphrase: } }cert 与 key 填证书和密钥的完整路径本地自签证书即可。请求头页面存在跨域请求时使用。{ liveServer.settings.headers: { Access-Control-Allow-Origin: * } }用 headers 做精细控制不建议直接开启 cors 全局开关。 效率技巧与常见坑快捷键altL, altO启动、altL, altC停止Mac 为cmdL, cmdO与cmdL, cmdC比在状态栏里找入口更快。端口被占用、服务器起不来 → 把liveServer.settings.port设为 0让系统随机分配可用端口。文件变了页面却没刷新 → 检查文件是否命中ignoreFiles规则再看状态栏确认服务器仍在运行必要时重启。手机或另一台电脑访问不了 → 确认两者在同一网络地址用电脑 IPv4 加端口localhost只对本机有效。工作区里没有 HTML 文件右键菜单找不到入口 → 按 F1 打开命令面板直接执行 Open with Live Server。 延伸参考docs/settings.md - 全部配置项与默认值说明docs/faqs.md - 常见问题含手机访问的具体步骤src/extension.ts - 扩展入口负责服务器的启停逻辑下次改完 CSS直接保存就行浏览器会自己刷新。可以先在一个小页面上把状态栏启动和文件自动刷新这两个动作走一遍之后遇到端口冲突、文件不刷新这类问题再按配置速查里的分组去调整。【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考