VS Code需用HTTP服务运行HTML文件，因file://协议受浏览器安全策略限制导致API失效、资源加载失败；推荐Live Server插件或Vite（适合模块化开发）。
vs code 本身不内置 web 服务器，直接双击打开 index.html 会走 file:// 协议——这时大多数现代 api（如 fetch()、localstorage 在某些上下文）、相对路径资源加载、cors 策略都会出问题。必须用本地 http 服务启动。
为什么不能直接用浏览器打开 HTML 文件
Chrome/Firefox 在 file:// 协议下默认禁用跨源请求、不支持 service worker、部分 CSS/JS 模块导入失败，连 ./assets/img.png 都可能 404。这不是你代码写错了，是浏览器安全策略使然。
- 所有静态资源（图片、CSS、JS）的相对路径在
file://下解析逻辑和 HTTP 不同 -
fetch('./data.json')直接抛Failed to fetch，无具体错误提示 - Live Server 插件起的服务默认是
http://localhost:5500/，路径解析与生产环境一致
推荐插件：Live Server（轻量且够用）
安装后右键任意 HTML 文件 → “Open with Live Server”，自动在默认浏览器打开，并监听文件变化实时刷新。它本质是基于 connect 的极简 Node.js 服务，不依赖项目配置。
-
端口可改：在 VS Code 设置中搜索
liveServer.settings.port，填入自定义值（如3000） - 根目录可调：若项目有子文件夹（如
src/），右键该文件夹 → “Open in Default Browser” 不生效；应右键其中的index.html，或修改liveServer.settings.root为src - 不支持 HTTPS 或自定义路由，纯静态场景完全够用；需要更复杂功能（如 mock 接口）才需换
json-server或vite
进阶：用 Vite 启动（适合含 JS 模块、热更新需求）
当项目开始写 ES 模块、用 import 加载组件，或需要按需编译 CSS/JS，Live Server 就力不从心了。Vite 提供原生 ESM 支持、秒级 HMR，且零配置即可运行静态站点。
- 终端执行：
npm create vite@latest my-site -- --template static，然后cd my-site && npm install && npm run dev - 它默认开启
http://localhost:5173，自动处理public/下静态资源、支持import.meta.env.BASE_URL - 注意：Vite 的
index.html必须放在项目根目录（不是src/），否则无法识别为入口 - 如果只是纯 HTML+CSS+少量内联 JS，Vite 属于“大炮打蚊子”；但一旦加了
main.js并用import，它立刻变得必要
真正容易被忽略的是路径基准问题：Live Server 把当前文件所在目录当作 web root，而 Vite 固定以项目根为 /。比如 ./css/style.css 在 Live Server 中若从子目录打开，路径就可能错位；Vite 则始终从 index.html 所在位置解析。这个差异会在你挪动文件时突然暴露出来。
