开发工具前端【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址https://gitcode.com/gh_mirrors/vs/vscode-live-server点击查看免费下载本指南以 vscode-live-server一个为静态与动态页面提供本地开发服务器与 live reload 热重载能力的 VS Code 扩展官方 FAQ 为基础系统解答开发者日常使用中最高频的五个问题如何为项目定制服务器配置、如何借助 Web 扩展接管热重载、如何让 PHP 等动态页面同样享受自动刷新、如何让手机等局域网设备访问开发服务器、以及多根工作区Multi-root Workspace下服务器根目录如何选择。读完本文你将能够独立完成项目级 settings.json 编写、在局域网内调试移动端页面并理解这些行为背后的源码实现路径。如何在项目中配置 Live Server 的 SettingsLive Server 的所有行为都由 VS Code 的配置项liveServer.settings.*驱动。在项目根目录创建.vscode文件夹并在其中新建settings.json写入如下键值对即可生效VS Code 会基于 package.json 中声明的 configuration schema 自动提供智能提示即 Intelli-sense{ liveServer.settings.port: 4500, liveServer.settings.root: /src, liveServer.settings.CustomBrowser : chrome, liveServer.settings.AdvanceCustomBrowserCmdLine: chrome --incognito --remote-debugging-port9222, liveServer.settings.NoBrowser : false, liveServer.settings.ignoreFiles : [ .vscode/**, **/*.scss, **/*.sass ] }注意CustomBrowser与AdvanceCustomBrowserCmdLine是互斥的两个开关二者同时配置时只应使用其中一个。配置项的实际消费逻辑集中在 src/Config.ts 中扩展通过workspace.getConfiguration(liveServer.settings)读取所有配置再在 src/Helper.ts 的generateParams()中把端口、host、根目录、忽略规则、代理、HTTPS、mount、headers 等组装为底层live-server的启动参数最终由 src/LiveServerHelper.ts 调用require(live-server).start(params)拉起服务器。也就是说你在 settings.json 里写的每一项配置都会在启动时被逐字段映射到真实的 HTTP 服务器参数上。如何使用 Live Server Web ExtensionLive Server 官方提供了一个配套的浏览器扩展「Live Server Web Extension」用于接管页面内的热重载注入逻辑。启用方式分两步安装浏览器扩展Live Server Web Extension在 VS Code 设置中把liveServer.settings.useWebExt置为true。从源码角度可以更清楚地看到两者的分工。默认情况下页面里的 live reload 客户端脚本由服务器端在 HTML 中注入注入脚本位于 lib/live-server/injected.html而注入依赖head或body标签存在——如果标签缺失扩展会通过 src/appModel.ts 的tagMissedCallback弹出警告Live Reload is not possible without a head or body tag.该提示可通过liveServer.settings.donotVerifyTags关闭见 src/Config.ts。当useWebExt为true时见 src/Helper.ts 传入的useBrowserExtension参数热重载完全交给浏览器扩展控制此时即使 HTML 中没有body标签任意文件的变化也能触发刷新。这正是解决动态页面无法注入脚本这一痛点的关键开关详见下一节。如何为动态页面如 PHP配置 Live Server纯静态 HTML 的 live reload 依赖服务器向 HTML 注入脚本而 PHP 等动态页面由服务端渲染后才返回 HTMLLive Server 注入的脚本会在页面加载前就被处理掉导致刷新失效。FAQ 给出的官方方案同样是Live Server Web Extension由浏览器扩展在页面端监听刷新信号与服务器端脚本注入解耦从而让 PHP 等动态页面也获得自动刷新能力。配置上只需同时满足两点安装 Live Server Web Extension 浏览器扩展将liveServer.settings.useWebExt设为true。如果需要让动态页面跑在真实的 PHP 环境上还可以配合代理设置liveServer.settings.proxy会把 Live Server 的某个路径baseUri转发到真实后端地址proxyUri。FAQ 原意是将真实 URL如 PHP 地址转移到 Live Server 启动的另一个 URL在 src/Helper.ts 中getProxySetup()会把{ enable, baseUri, proxyUri }转换为底层proxy参数传给服务器从而实现反向代理。典型配置如下见 docs/settings.mdliveServer.settings.proxy: { enable: true, // 设为 true 以启用 baseUri: /, // 从哪个路径开始代理 proxyUri: http://localhost/php/ // 实际的后端 PHP 地址 }如何从手机访问 Live Server想要用手机或平板访问开发服务器前提是PC 与移动设备处于同一个局域网。步骤如下确认设备在同一网络获取 PC 的局域网 IPWindows打开CMD输入ipconfigLinux/macOS打开终端输入ifconfig记下IPv4 Address通常形如192.168.xx.xx这是 PC 的 IP 地址在移动端浏览器地址栏输入http://IP Address : Port例如PC 上服务器运行在http://127.0.0.1:3500端口即为3500那么手机访问地址为http://192.168.xx.xx:3500。这里有几个容易被忽略的前提从源码中可以找到确切依据服务器必须监听在可被局域网访问的地址上。默认情况下服务器 host 是127.0.0.1见 package.json 的默认值该地址仅限本机访问手机是无法访问的。这正是liveServer.settings.hostdocs/settings.md与liveServer.settings.useLocalIpdocs/settings.md存在的原因前者可把 host 切换为localhost或局域网 IP后者为true时扩展会通过require(ips)().local自动取本机局域网 IP 作为 host见 src/appModel.ts。跨设备调试时请把useLocalIp设为true或将host显式设为0.0.0.0。浏览器打开失败并不代表服务器没起来。从 src/appModel.ts 的错误处理看扩展会提示 Server is started at {host}:{port} but failed to open browser服务器本身仍在运行——移动端访问依赖的是这个正在监听的地址与端口。多根工作区Multi-root Workspace支持情况FAQ 明确说明当前版本不支持为多根工作区中的多个文件夹同时启动服务器扩展会自动选择工作区中的第一个文件夹。该问题的追踪地址为仓库 issue #43。不过源码中其实已经内置了一套完整的多根工作区解析与切换机制可以作为自动选择第一个文件夹的底层解释见 src/workspaceResolver.ts只有一个工作区时直接返回该文件夹路径用户通过右键某个 HTML 文件启动时根据fileUri前缀匹配它所属的工作区自动选中并写入multiRootWorkspaceName用户已通过配置或命令设置过multiRootWorkspaceName时校验该名称是否仍存在若有效则直接使用无效则重置以上都不满足时弹出 Quick Pick 让用户手动选择。对应的配套配置项是liveServer.settings.multiRootWorkspaceNamedocs/settings.md它表示多根工作区下服务器的入口文件夹可通过命令面板CtrlShiftP执行Live Server: Change Live Server workspace来切换扩展本身也足够聪明右键 HTML 打开服务器时能自动判定正确的工作区。该命令在 package.json 中注册为extension.liveServer.changeWorkspace实现位于 src/appModel.ts——切换成功后会提示Success! name workspace is now root of Live Server若服务器正在运行则会先将其关闭。附与 FAQ 直接相关的其余高频设置上述 FAQ 用到的配置只是liveServer.settings.*家族的一小部分。为了让你在实际项目中少踩坑这里补充 FAQ 与 docs/settings.md 中相互印证的常用项全部默认值均可在 package.json 的 configuration 声明中核实配置项默认值作用与要点liveServer.settings.port5500自定义端口设为0时使用随机端口package.jsonliveServer.settings.root/服务器根目录相对工作区的路径如/sub_folder1/sub_folder2路径无效时回退到工作区根src/Helper.tsliveServer.settings.CustomBrowsernull可选chrome、chrome:PrivateMode、firefox、firefox:PrivateMode、microsoft-edge、blisknull时使用系统默认浏览器liveServer.settings.AdvanceCustomBrowserCmdLinenull自定义浏览器命令行如chrome --incognito --headless --remote-debugging-port9222优先级高于CustomBrowser与ChromeDebuggingAttachmentliveServer.settings.ChromeDebuggingAttachmentfalse启用后以调试端口 9222 打开 Chrome配合 Debugger for Chrome 扩展做断点调试liveServer.settings.NoBrowserfalse为true时只启动服务器不打开浏览器liveServer.settings.ignoreFiles见 package.json忽略指定文件的变更默认忽略.vscode/**、**/*.scss、**/*.sass、**/*.ts、node_modules/**等liveServer.settings.host127.0.0.1切换localhost/127.0.0.1/ 其他主机名liveServer.settings.useLocalIpfalse为true时自动使用本机局域网 IP 作为 host便于移动端访问liveServer.settings.donotShowInfoMsgfalse关闭 Server starts with port xxxx 之类的信息弹窗liveServer.settings.donotVerifyTagsfalse关闭 HTML 缺少head/body标签时的警告提示liveServer.settings.wait100热重载前的延迟毫秒liveServer.settings.fullReloadfalse默认 CSS 变更只注入不整页刷新为true时改为整页刷新liveServer.settings.mount[]将目录挂载到路由如[[/root, /dist]]路径以工作区为基准解析src/Helper.tsliveServer.settings.file单页应用SPA的入口文件404 时回退到该文件liveServer.settings.httpsenable: false启用 HTTPS需提供证书cert、私钥key与passphrase的完整路径liveServer.settings.corsfalse为true时对所有网站开放 CORS响应头Access-Control-Allow-Origin: *官方不推荐优先用headers精细控制liveServer.settings.headers{}追加自定义响应头例如精确指定Access-Control-Allow-Origin等liveServer.settings.useWebExtfalse热重载完全交给 Live Server Web Extension动态页面与缺body标签的场景也能刷新上述配置项在 docs/settings.md 中有逐条的默认值、示例与注意事项package.json 中对应的 JSON schema 定义了类型、默认值、枚举与校验正则如port限定 0–65535、proxyUri必须为http(s)://开头这也是编辑器内 Intelli-sense 的来源。掌握 FAQ 中的五个高频场景再配合这张参数速查表你就能在静态站点、动态页面与跨设备调试之间无缝切换。赞分享开发工具前端【免费下载链接】vscode-live-serverLaunch a development local Server with live reload feature for static dynamic pages.项目地址https://gitcode.com/gh_mirrors/vs/vscode-live-server点击查看免费下载相关推荐终极指南如何在VSCode Live Server中配置PHP动态页面支持终极指南如何在VSCode Live Server中配置PHP动态页面支持 VSCode Live Server是一款强大的开发工具能够为静态和动态页面提供开发工具前端VSCode Live Server 完全使用指南VSCode Live Server 是一款功能强大的Visual Studio Code扩展插件为前端开发者提供带有实时重载功能的本地开发服务器。该插件支持开发工具前端VSCode Live Server 完全使用指南VSCode Live Server 完全使用指南 VSCode Live Server 是一个功能强大的 Visual Studio Code 扩展插件它为开发工具前端上一篇Dify 零代码接入高德地图Agent 节点填 2 行 MCP 配置就搞定下一篇如何快速掌握网盘直链下载助手新手也能上手的完整实践指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考