企业官网建设流程全解析

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，按保存的瞬间浏览器里就变了，不用切窗口手动刷新。Live Server 是一款免费的 VSCode 扩展，做的就是这件事：启动一个带实时重载的本地开发服务器。写静态页面的开发者、正在练 HTML 和 CSS 的前端新手，都适合用它。

从安装到 Go Live 的 5 步

1. 打开 VSCode 扩展面板，搜索 "Live Server"，点击安装。
2. 在 VSCode 中打开一个包含 HTML 文件的文件夹，双击打开页面文件。
3. 点击底部状态栏的 "Go Live" 按钮，浏览器自动打开并显示页面。
4. 修改代码后按保存，浏览器自动重载，显示最新效果。
5. 用完后点状态栏的 "Stop"，结束服务。

三个真实场景里的 Live Server

预览静态页面。打开 index.html 点 Go Live 后，改任何 HTML 结构或 CSS 样式，保存即见效果。调样式不用来回切窗口。

手机同步预览。想在手机上确认效果，先确保手机和电脑连同一个 Wi-Fi，用 ipconfig（Windows）或 ifconfig（macOS/Linux）查出电脑 IP，在浏览器输入http://IP:端口，端口号看 VSCode 状态栏的 "Server starts" 提示。之后两边画面同步。

给 JS 打断点。装 Debugger for Chrome 扩展，把liveServer.settings.ChromeDebuggingAttachment设为 true，再从调试面板点 "Attach to Chrome"，就能挂到当前正在运行的浏览器窗口上，设断点、单步执行，不用另开调试窗口。

Live Server 常用配置四件套

配置改在 VSCode 的 settings.json 里；把同样的配置写进项目根的.vscode/settings.json，则只对该项目生效，也方便和队友共享。最常用的是下面四项：

避坑提醒

端口 5500 被占用，起不来服务？把liveServer.settings.port改成别的数字，或者直接设 0，让 Live Server 自动挑一个可用端口。

保存文件却不触发重载？先看文件是否命中ignoreFiles里的规则，默认.scss、.sass、.ts文件不会被跟踪；再确认状态栏的 "Go Live" 处于活动状态。

浏览器没有自动打开？检查liveServer.settings.NoBrowser是否被设成了 true，改回 false 恢复默认行为。

延伸资料

• docs/settings.md：完整配置项与默认值清单
• docs/faqs.md：手机访问、动态页面等常见问题
• src/extension.ts：扩展入口文件
• src/appModel.ts：核心服务器逻辑

如果它对你的工作流有用，装上 Live Server，下一个静态页面直接点 "Go Live"，以后保存就等于刷新。

【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static & dynamic pages.项目地址: https://gitcode.com/gh_mirrors/vs/vscode-live-server