企业官网建设流程全解析

• 开发工具
• 前端

本指南以 vscode-live-server（一个为静态与动态页面提供本地开发服务器与 live reload 热重载能力的 VS Code 扩展）官方 FAQ 为基础，系统解答开发者日常使用中最高频的五个问题：如何为项目定制服务器配置、如何借助 Web 扩展接管热重载、如何让 PHP 等动态页面同样享受自动刷新、如何让手机等局域网设备访问开发服务器、以及多根工作区（Multi-root Workspace）下服务器根目录如何选择。读完本文，你将能够独立完成项目级 settings.json 编写、在局域网内调试移动端页面，并理解这些行为背后的源码实现路径。

如何在项目中配置 Live Server 的 Settings？

Live 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-port=9222", "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 Extension？

Live Server 官方提供了一个配套的浏览器扩展「Live Server Web Extension」，用于接管页面内的热重载注入逻辑。启用方式分两步：

1. 安装浏览器扩展（Live Server Web Extension）；
2. 在 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 等动态页面由服务端渲染后才返回 HTML，Live 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.md）：

"liveServer.settings.proxy": { "enable": true, // 设为 true 以启用 "baseUri": "/", // 从哪个路径开始代理 "proxyUri": "http://localhost/php/" // 实际的后端 PHP 地址 }

如何从手机访问 Live Server？

想要用手机或平板访问开发服务器，前提是PC 与移动设备处于同一个局域网。步骤如下：

1. 确认设备在同一网络；
2. 获取 PC 的局域网 IP：
   • Windows：打开CMD输入ipconfig；
   • Linux/macOS：打开终端输入ifconfig；
3. 记下IPv4 Address（通常形如192.168.xx.xx），这是 PC 的 IP 地址；
4. 在移动端浏览器地址栏输入：

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.host（docs/settings.md）与liveServer.settings.useLocalIp（docs/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：

1. 只有一个工作区时，直接返回该文件夹路径；
2. 用户通过右键某个 HTML 文件启动时，根据fileUri前缀匹配它所属的工作区，自动选中并写入multiRootWorkspaceName；
3. 用户已通过配置或命令设置过multiRootWorkspaceName时，校验该名称是否仍存在，若有效则直接使用，无效则重置；
4. 以上都不满足时，弹出 Quick Pick 让用户手动选择。

对应的配套配置项是liveServer.settings.multiRootWorkspaceName（docs/settings.md），它表示多根工作区下服务器的入口文件夹，可通过命令面板（Ctrl+Shift+P）执行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 声明中核实）：

上述配置项在 docs/settings.md 中有逐条的默认值、示例与注意事项；package.json 中对应的 JSON schema 定义了类型、默认值、枚举与校验正则（如port限定 0–65535、proxyUri必须为http(s)://开头），这也是编辑器内 Intelli-sense 的来源。掌握 FAQ 中的五个高频场景，再配合这张参数速查表，你就能在静态站点、动态页面与跨设备调试之间无缝切换。

• 开发工具
• 前端