最稳方式是右键html文件选“open with live server”，需先安装同名扩展，它启动http服务（如http://127.0.0.1:5500/）而非file://协议，避免ajax、es模块等功能失效；默认端口5500，冲突自动顺延；无此扩展可用vs code内置preview（ctrl+shift+v），但仅静态渲染、不支持js模块等http特性；复杂项目推荐命令行工具如serve或http-server。
vscode 里用 Live Server 打开 HTML 文件最稳
直接点右键选 Open with Live Server 就行，前提是装了同名扩展。它会自动起一个本地服务（比如 http://127.0.0.1:5500/xxx.html），而不是用 file:// 协议双击打开——后者会导致 Ajax、模块导入、相对路径等一堆功能直接失效。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND 或 import not supported in file://，基本都是因为没走 HTTP 服务。
- 别手动在浏览器地址栏输
file:///xxx.html，哪怕它能显示也不代表代码逻辑正常 - Live Server 默认端口是
5500，冲突时会顺延到5501，不用手动改配置 - 如果项目有
index.html，右键点它再选 Live Server；否则右键任意 HTML 文件都行
没有 Live Server？用 VS Code 内置的 Preview 功能凑合
VS Code 1.84+ 自带 Preview 命令（快捷键 Ctrl+Shift+V 或右键菜单），但它只渲染纯静态 HTML，不启动服务，也不支持 JS 模块、fetch、localStorage 等需要 HTTP 上下文的功能。
使用场景：快速看排版、检查基础结构、写 Markdown 预览——别指望它跑 Vue 或 React 组件。
超级科幻炫酷可视化带音乐时空隧道特效背景动画代码下载。支持自定义音乐文件。温馨提示：该js特效音乐需要在服务器环境下运行或本地使用火狐浏览器打开，否则只有动画，没有音乐。
- 按
Ctrl+Shift+P输入HTML: Preview也能唤出 - 预览页是只读的，改完代码要手动刷新，且不支持热更新
- 路径解析按当前文件所在目录为根，但依然走
file://，所以./data.json会 404
命令行起服务更可控，适合调试复杂路径
当项目结构深、有多个子目录或需要指定端口/根路径时，用命令行工具比图形界面更透明。推荐 serve（轻量）或 http-server（兼容老项目）。
执行前先确认你在项目根目录（不是某个子文件夹），否则路径容易错乱。
- 全局安装：
npm install -g serve，然后运行serve -s .（-s表示单页应用模式） - 想换端口：
serve -p 8080；想指定公开目录：serve -s dist -
http-server更老派但支持 CORS：npx http-server -c-1 -p 8080（-c-1关闭缓存）
为什么不能直接双击 HTML 文件？
现代浏览器出于安全限制，对 file:// 协议做了大量阉割：跨域请求被禁、ES Module 不认 import、XMLHttpRequest 加载本地文件失败、localStorage 可能被清空——这些都不是你代码写错了，而是协议本身不支持。
哪怕页面看起来“能显示”，只要涉及任何异步加载、组件化、状态管理，就大概率在真实部署环境出问题。
- Chrome 甚至会在控制台明确报
Not allowed to load local resource - Firefox 对
file://更宽松一点，但依然不保证一致性，别依赖 - 开发阶段就用 HTTP 服务，等于提前暴露集成问题，省得上线才发现路径全错
http:// 开头，再看终端有没有服务日志输出，比反复重启 VS Code 有用得多。 
