Live Server 是 VSCode 中用于启动本地 HTTP 服务器并自动刷新的前端开发插件。它解决 file:// 协议下 Fetch、模块导入等功能受限问题，支持端口、根目录、浏览器等自定义配置，但不支持后端逻辑、构建流程和代理请求。

Live Server 是 VSCode 中最常用的前端开发辅助插件之一，它能一键启动本地开发服务器，自动刷新浏览器，省去手动刷新和配置服务器的麻烦。

为什么需要 Live Server？

写完 HTML/CSS/JS 后，直接双击打开文件会走 file:// 协议，很多功能（如 Fetch、模块导入、相对路径资源加载）会因跨域或协议限制而失效。Live Server 启动的是真正的 http://localhost:xxxx 服务，模拟真实部署环境，让代码行为更可靠。

shopify-app-react-router

构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G

下载

怎么安装和使用？

在 VSCode 扩展市场搜索 “Live Server”，点击安装即可。安装后，右键点击任意 HTML 文件 → 选择 “Open with Live Server”，VSCode 会自动：

• 启动本地服务器（默认端口 5500，可自定义）
• 用默认浏览器打开该页面
• 监听文件变化，保存即刷新（无需手动点刷新按钮）

你也可以按快捷键 Alt + L, Alt + O 快速开启（Windows/Linux），Mac 上是 Cmd + L, Cmd + O。

常用设置和小技巧

通过 VSCode 设置（settings.json）可以调整 Live Server 行为：

• “liveServer.settings.port”: 3000 —— 指定端口号
• “liveServer.settings.root”: “./src” —— 设置根目录，适合项目结构较深时
• “liveServer.settings.CustomBrowser”: “chrome” —— 指定默认浏览器
• “liveServer.settings.AdvanceCustomBrowserCmdLine”: “--incognito” —— 启动无痕模式，避免缓存干扰

另外，关闭 Live Server 只需点击右下角状态栏的 “Go Live” 按钮，或右键选择 “Stop Live Server”。

它不解决什么？

Live Server 是轻量级开发服务器，适合静态页面和简单前端实验。它不支持：

• 后端逻辑（如 Node.js 接口、数据库）
• 构建流程（如 Webpack、Vite 的热更新 HMR）
• 代理请求（如转发 API 到后端服务）

如果项目变复杂，建议升级到 Vite 或 Create React App 等现代工具链。

基本上就这些——简单、顺手、不折腾，是新手入门和快速验证想法的好帮手。