vs code 不运行 html，浏览器才执行；直接双击打开 file:// 协议页面会因安全策略报错，应使用 live server 插件启动本地 http 服务器（如 http://localhost:5500）以支持 fetch、esm 等特性。
VS Code 本身不“运行” HTML 项目，它只是编辑器；真正执行 HTML 的是浏览器。你只需要让浏览器打开文件，而不是在 VS Code 里点“运行”。
为什么点“运行”没反应？
VS Code 默认没有内置的 HTML 执行环境，Run Code 插件对 .html 文件通常只做语法检查或简单预览，不会启动本地服务器——而直接双击打开的 file:// 协议页面，在涉及 fetch、import、localStorage（某些安全策略下）或跨域资源时会失败。
- 常见错误现象：
net::ERR_FILE_NOT_FOUND、Access to script at 'file:///...' from origin 'null' has been blocked - 根本原因：浏览器禁止从本地文件系统加载模块或发起某些 API 请求
- 正确做法：用一个最小本地服务器把项目“托管”起来，让地址变成
http://localhost:5500/这类
推荐方案：Live Server 插件（最轻量）
它会在 VS Code 内置一个微型 HTTP 服务器，并自动刷新页面，适合静态 HTML/CSS/JS 项目。
- 安装插件：
Live Server（作者：Ritwick Dey） - 打开你的
index.html文件，右键 →Open with Live Server，或按快捷键Alt+L Alt+O - 它默认使用端口
5500，可在设置里改liveServer.settings.port - 注意：不要在
node_modules或深层嵌套路径下开，否则可能因路径解析异常导致 404
需要本地 API 或热更新？用 serve 或 vite
如果你的 HTML 引用了 ./src/main.js，或者要调试 ESM 模块、import.meta.env 等现代特性，Live Server 就不够用了。
立即学习“前端免费学习笔记（深入）”；
-
npx serve -s：零配置，静态托管，支持 SPA fallback（适合 React/Vue 构建后产物） -
npx vite：如果项目有vite.config.js或用了import语法，这是更准的开发环境 - 区别：Live Server 不处理构建逻辑，也不识别
vite的/@vite/client注入；而vite启动的是完整前端开发服务器 - 性能影响：Vite 启动略慢但热更新极快；
serve启动最快但无 HMR
别手动配 http-server 或 Python 的 http.server
虽然能跑起来，但容易踩坑：
-
python -m http.server 8000默认不支持 CORS 和 SPA fallback，路由跳转会 404 -
http-server需全局安装，且默认不监听所有地址（-a 0.0.0.0才能手机访问），新手常卡在这步 - 它们都不和 VS Code 深度集成，没法一键启停、自动打开浏览器、保存即刷新
真正关键的不是“怎么启动”，而是理解：HTML 是浏览器运行的，VS Code 只负责帮你把它更快、更稳地交到浏览器手上。路径错一层、协议用错 file:// 而不是 http://，就全白搭。
