Live Server 完全指南:VSCode 中 3 分钟搭起带实时刷新的本地开发服务器【免费下载链接】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 就是用来去掉这一步的:它是一款 VSCode 扩展,会启动一个支持实时预览的本地开发服务器,文件一保存,浏览器自动刷新,让你可以一直留在编辑器里干活。项目概览Live Server 是一个开源(采用 MIT 协议)的 VSCode 扩展,一句话定位:为静态和动态页面提供带自动重载能力的本地服务器。它帮你监控文件变化、打开浏览器、管理端口,还顺带支持 HTTPS 和局域网访问。适合做纯静态页面的开发者、刚学前端需要即时反馈的同学,以及需要多页面快速预览的小团队。快速上手:从安装到看到页面只需 3 步1. 安装打开 VSCode 按CtrlP,输入ext install ritwickdey.liveserver回车即可;也可以直接在扩展市场搜索 Live Server 点安装。2. 启动服务器(下面任选一种)状态栏按钮:打开项目后点击底部的Go Live(启动后会变成 Stop Live Server,再点一下就停)右键菜单:在资源管理器里右键任意 HTML 文件,选 Open with Live Server;在编辑器内右键也能看到同一入口快捷键:AltL, AltO启动,AltL, AltC停止;Mac 上对应CmdL, CmdO和CmdL, CmdC命令面板:F1后输入Live Server: Open With Live Server启动,输入Live Server: Stop Live Server停止注意:前三种方式依赖工作区里存在.html或.htm文件;如果项目里一个 HTML 都没有,就改用快捷键或命令面板启动。3. 确认成功启动后 VSCode 会提示服务地址(默认http://127.0.0.1:5500),浏览器自动打开你的页面。从这一刻起,改完代码保存,浏览器自己刷新。换个场景看它怎么干活场景一:日常本地预览默认端口是 5500。一个容易忽略的细节:默认情况下 CSS 的改动会直接注入页面,而不是整个浏览器刷新,页面上的表单输入状态不会丢;如果你希望每次改动都完整重载,把liveServer.settings.fullReload设为true即可。场景二:手机上同步看效果服务器本身就监听局域网。启动服务后,只要手机和电脑连着同一个 Wi-Fi,在浏览器里输入http://电脑IP:端口就能打开同一个页面,比如http://192.168.1.100:5500。电脑 IP 用ipconfig(Windows)或ifconfig(Linux/macOS)查询 IPv4 地址。别输入127.0.0.1——它只对当前这台机器有效。场景三:配合 Chrome 调试器打断点装好 Debugger for Chrome 扩展后,把liveServer.settings.ChromeDebuggingAttachment设为true。启动 Live Server,在调试面板点 Attach to Chrome,调试功能就会注入到正在运行的那个浏览器窗口里,可以设断点、看变量,不用手动重启浏览器。配置速查所有配置项都以liveServer.settings.开头。想对项目内统一生效,把它们写进项目根目录的.vscode/settings.json就行。最常改的port:服务端口,默认 5500;填0表示让系统随机挑一个空闲端口CustomBrowser:指定用哪个浏览器打开,可填chrome、firefox、microsoft-edge等,后面加:PrivateMode可强制隐私模式ignoreFiles:哪些文件变化不触发刷新,默认已排除.vscode/**、**/*.scss、**/*.sass、**/*.tsroot:服务器根目录,比如填/src就是让 src 子目录充当网站根wait:刷新前的延迟(毫秒),默认 100,文件频繁连存时可以调大偶尔用得到的host:访问用的主机名,默认127.0.0.1,可换成localhostNoBrowser:设为true后启动服务但不再自动弹浏览器file:指定入口文件,适合单页应用(SPA)donotShowInfoMsg:关掉Server starts with port xxxx这类提示fullReload:设为true时任何改动都整页刷新(默认只注入 CSS)基本不用碰的https:开启 HTTPS,需配cert、key(完整路径)和可选的passphraseheaders:给响应追加自定义请求头,比如Access-Control-Allow-Origin;跨域需求优先用它,别用全局的cors开关AdvanceCustomBrowserCmdLine:用完整命令行启动任意浏览器,例如chrome --incognito --remote-debugging-port9222;同时配置时它的优先级高于CustomBrowserproxy:把某个路径前缀代理到另一个服务地址mount:把本地目录挂载到某个 URL 路径multiRootWorkspaceName:多根工作区下指定从哪个入口起服务,也可在命令面板里用Live Server: Change Live Server workspace切换排坑指南端口被占用,服务起不来症状:启动报错或提示端口已被使用原因:5500 端口被其他程序占着解决:把liveServer.settings.port改成别的数字,或者直接设0让系统随机分配文件保存了,浏览器却不刷新症状:改了.ts、.scss等文件保存后,页面毫无反应原因:这些扩展名在ignoreFiles的默认排除名单里,或者你自己加过解决:核对并修改liveServer.settings.ignoreFiles;同时确认状态栏是 Go Live 状态(服务确实在跑),必要时重启一次服务手机上打不开网站症状:电脑访问正常,手机输127.0.0.1:5500却连接失败原因:127.0.0.1只在本地机器有效,而且手机和电脑必须在同一局域网解决:用电脑的 IPv4 地址(ipconfig/ifconfig查)加端口号访问,并确认两台设备连着同一个 Wi-Fi调试时断点打不上症状:想在 Live Server 打开的浏览器里调试 JS,却设不了断点原因:ChromeDebuggingAttachment没打开,或没装 Debugger for Chrome 扩展解决:先安装 Debugger for Chrome 扩展,再把liveServer.settings.ChromeDebuggingAttachment设为true,启动服务后在调试面板选 Attach to Chrome适合谁,不适合谁Live Server 适合:纯静态页面(HTML/CSS/JS)、课程演示、多页面网站的快速预览、手机多端联调,以及想在本机临时加个 HTTPS 的小项目。它不适合:PHP、Node 这类需要在服务器上执行代码的动态页面——它只负责托管静态资源,动态页面要配合官方辅助项目 Live Server Web Extension 或直接用正经的后端服务;也不适合 webpack、Vite 这类有完整构建链的前端工程,那些场景构建工具自带的 dev server 热重载更顺手,两者定位是互补的。延伸阅读扩展入口:src/extension.ts主逻辑与文件监控:src/appModel.ts配置项定义:src/Config.ts状态栏 UI:src/StatusbarUi.ts服务器核心(live-server 封装):lib/live-server/完整配置说明:docs/settings.md常见问题:docs/faqs.md更新记录:CHANGELOG.md【免费下载链接】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），仅供参考