vscode中html文件需通过http服务（如live server插件或python/node.js本地服务器）运行，而非file://协议预览，否则fetch、import等因cors被拒；live server默认端口5500，支持热更新但不重执行初始化逻辑。
VSCode 里点开 HTML 文件只是预览，不是“运行”
VSCode 本身不带 Web 服务器，双击或用 Open with Live Server 打开的 index.html，地址是 file:// 协议。这时候 fetch、XMLHttpRequest、import 等会直接失败，浏览器报 CORS policy: file:// protocol is not supported —— 不是你代码写错了，是协议卡死了。
真正能算“运行”的，只有启动一个本地 HTTP 服务，让页面走 http://localhost:xxxx。
- 别信右键菜单里的 “Open with Browser”，它和双击效果一样，都是
file:// -
Live Server插件是目前最省事的选择，它自动起http://127.0.0.1:5500这类地址 - 如果项目用了
import或要读取同目录 json，不用 HTTP 服务就必然报错
Live Server 插件怎么装、怎么用、默认端口在哪
它不是 VSCode 自带功能，得手动装插件。装完右键 HTML 文件，出现 Open with Live Server 才算生效。
- 插件名就叫
Live Server（作者：Ritwick Dey），VSCode 扩展商店搜这个名，别下错成vscode-live-server（老版本已停更） - 第一次点击后，右下角弹出
Starting Live Server...，然后自动在默认浏览器打开http://127.0.0.1:5500/xxx/index.html - 端口号默认是
5500，想改就去 VSCode 设置搜liveServer.settings.port，填数字就行（比如3000） - 它支持热更新：保存 HTML/CSS/JS 后，页面自动刷新，但不会触发
console.log('page loaded')这种初始化逻辑重跑
不用插件？用 Python 或 Node.js 起个最小 HTTP 服务
有些环境不能装插件（比如公司锁死扩展），或者你想确认底层原理，就绕过插件自己起服务。
立即学习“前端免费学习笔记（深入）”；
- Python 3 用户：终端进 HTML 所在目录，执行
python -m http.server 8000，然后访问http://localhost:8000/index.html - Node.js 用户：全局装
http-server：npm install -g http-server，再运行http-server -p 8080 - 注意路径：必须在 HTML 文件所在目录或其父目录执行命令，否则 404；
http-server默认只 serve 当前目录 - Python 2 的
python -m SimpleHTTPServer 8000已淘汰，别用
为什么改了代码没反应？常见缓存和路径陷阱
Live Server 看似自动刷新，但几个地方容易让你以为“没生效”。
- 浏览器强缓存 JS/CSS：按
Ctrl+Shift+R（windows）或Cmd+Shift+R（Mac）硬刷新，绕过缓存 - HTML 里写了绝对路径如
src="/js/main.js"，而文件实际在./js/main.js—— Live Server 根目录就是当前打开的文件夹，/指的就是它，别加多余斜杠 - VSCode 左侧资源管理器里右键点的是子文件夹里的 HTML，但 Live Server 实际以整个工作区根为服务根目录（除非你用“以文件夹形式打开”）
- 修改了
index.html但浏览器标签页关了又手动输地址打开的——这会断开 Live Server 连接，得重新右键点“Open with Live Server”
最常被忽略的一点：Live Server 不监听非当前工作区根目录下的文件变动。如果你把项目放在 D:webdemo，却用 VSCode 打开了 D:web，那改 demo/ 里的文件，它可能不刷新。