VSCode 无法直接双击运行 HTML 是因浏览器对 file:// 协议实施严格安全限制，导致 fetch、import、相对路径等失效；必须用 Live Server 等 HTTP 服务（如 http://127.0.0.1:5500）才能模拟真实环境。
VSCode 本身没有内置本地服务器，必须靠插件或命令行工具启动 HTTP 服务，否则用 file:// 协议打开 HTML 会导致 fetch 失败、相对路径 404、Service Worker 不可用等硬性限制。
为什么不能直接双击 HTML 文件运行
浏览器对 file:// 协议做了严格限制：JS 模块 import 会报 CORS 错误，fetch('./data.json') 直接失败，./css/style.css 可能加载为空，连 localStorage 在某些上下文里都不可用。这不是代码问题，是浏览器安全策略强制行为。
Live Server 启动的是 http://127.0.0.1:5500/ 这类真实 HTTP 地址，路径解析逻辑与生产环境一致，所有静态资源按 URL 基准解析，这才是开发时该有的环境。
Live Server 插件怎么装和启动最稳
认准作者是 Ritwick Dey 的官方扩展（微软认证），别装错名字相近的仿版。安装后无需重启 VSCode，三种方式任选其一即可生效：
立即学习“前端免费学习笔记（深入）”；
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 右键任意
index.html→ “Open with Live Server” - 状态栏右下角点
Go Live按钮 - 快捷键
Ctrl+Shift+P→ 输入Live Server: Open with Live Server
启动后自动在默认浏览器打开页面，并监听当前文件所在目录下的所有变更——保存即刷新，不需手动 F5。
端口冲突或根目录不对怎么办
默认端口 5500 被占时，页面打不开或提示“address already in use”，这时要改配置：
- 在 VSCode 设置中搜索
liveServer.settings.port，改成3000或0（设为0会自动分配空闲端口） - 若项目结构是
src/index.html，但资源路径写的是./css/style.css，则需设置liveServer.settings.root为/src，否则 CSS 会 404 - 不要依赖右键“Open in Default Browser”，那个走的还是
file://，无效
配置项统一写在工作区的 .vscode/settings.json 里，避免全局污染。
什么情况下 Live Server 就不够用了
它只服务静态文件，不处理模块解析、不支持 import 原生 ESM、不代理 API 请求、不编译 TypeScript 或 JSX。一旦你写了：
-
import { foo } from './utils.js'（ES 模块） -
npm run build生成dist/目录再预览 - 需要 mock 接口或转发请求到后端
就得换 Vite：npm create vite@latest my-site -- --template static，然后 npm run dev。Vite 默认起在 http://localhost:5173，支持热更新、环境变量、import.meta.env.BASE_URL，且路径基准固定为项目根目录——这点和 Live Server 的“以 HTML 所在目录为根”完全不同，容易踩坑。
