必须起本地HTTP服务才能调试HTML文件，因浏览器对file://协议限制XMLHttpRequest、fetch等API以防范安全风险；Python可用python -m http.server 8000，Node.js推荐serve或http-server，VS Code Live Server本质调用http-server且有端口与根目录限制。
为什么不能直接双击打开 HTML 文件调试
浏览器直接打开 file:// 协议的 HTML 文件时，XMLHttpRequest、fetch()、import（ES 模块）、localStorage（某些安全策略下）等行为会受限或报错，比如出现 CORS error 或 Failed to load module script。这不是你代码写错了，是浏览器的安全机制——它不把本地文件当“服务器环境”。
所以必须起一个真正的 HTTP 服务，哪怕只是本地的。
用 Python 快速起一个最小可用服务器
如果你装了 Python 3.6+，不用额外装任何包，终端进项目目录后执行一行命令就行：
python -m http.server 8000
然后访问 http://localhost:8000 就能加载页面。注意几点：
立即学习“前端免费学习笔记（深入）”；
-
http.server默认只提供静态文件服务，不支持路由重写、代理或热更新 - 端口被占用时会报
Address already in use，换端口比如8080即可 - 路径必须是当前工作目录，不能跨目录访问上级（比如
../secret.html会被拒绝） - Python 2 用户请用
python -m SimpleHTTPServer 8000，但建议升级到 Python 3
Node.js 用户该选 serve 还是 http-server
两者都轻量，但行为有差异：
-
npx serve -s：默认开启 SPA 支持（所有 404 都返回index.html），适合 React/Vue 路由；但不带-s时和普通静态服务一样 -
npx http-server -c-1：-c-1禁用缓存，开发时更可靠；默认不处理 SPA 路由，要手动配--proxy才能转发 API 请求 - 如果项目里已有
package.json，建议把命令写进scripts，比如"dev": "serve -s"，避免每次敲长命令 - 别用
live-server——它自动注入脚本实现热刷新，但会污染全局作用域，某些框架（如 Svelte）会因此报document is not defined
VS Code 插件 Live Server 的真实能力边界
它本质就是调用 http-server，界面友好但掩盖了底层逻辑：
- 右键“Open with Live Server”后，默认端口是
5500，可在设置里改liveServer.settings.port - 它不会自动代理后端请求，
fetch('/api/user')仍会 404，除非后端也跑在同域，或你手动配liveServer.settings.proxy - 关闭浏览器标签 ≠ 关闭服务，进程可能还在后台跑着，下次启动可能提示端口占用
- 它不识别
public/或dist/目录约定，总是以当前打开的文件所在文件夹为根目录
真正麻烦的不是“怎么起服务”，而是服务起来之后，资源路径、API 地址、模块导入这些细节是否和生产环境一致——这点常被忽略，等到上线才发现路径全错。
