VS Code中需用Live Server插件或命令行工具（如http-server、Python服务器）启动HTTP服务，因file://协议会禁用fetch、ES模块等功能，必须通过http://localhost访问才能正常运行现代前端特性。
VS Code 里写完 HTML 怎么直接在浏览器打开
不是靠“运行”按钮，而是靠手动打开或插件辅助——VS Code 本身不内置 Web 服务器，双击 index.html 虽能打开，但会触发 file:// 协议限制，导致 ajax、ES 模块、fetch 等功能直接失效。
- 本地开发必须走
http://localhost:xxxx，不能依赖文件系统路径 - 最轻量做法：用 VS Code 内置的
Live Server插件（搜名字装就行），右键 HTML 文件 →Open with Live Server - 它会自动起一个本地 HTTP 服务，同时监听文件变化，保存即刷新，端口默认
5500，可改配置项liveServer.settings.port - 别用“Preview on Web Server”之类老插件，已停更，有 CORS 和 MIME 类型问题
为什么本地双击 HTML 在 chrome 里报 net::ERR_FILE_NOT_FOUND 或 fetch 失败
因为浏览器对 file:// 协议做了严格限制：无法加载本地 jsON、不能跨目录读取 JS、ES 模块（type="module"）直接抛 access to script at 'file://...' from origin 'NULL' is denied。
- 这不是代码错，是协议层拦截，换 firefox 或 edge 一样报错
- 哪怕只有一行
fetch('./data.json')，在 file 协议下必挂 - 解决方式只有两个：起本地 HTTP 服务，或把整个项目扔进已有的本地环境（如 XAMPP、WAMP）
- 临时验证？把 Chrome 启动参数加
--allow-file-access-from-files（不推荐，新版 Chrome 已基本禁用）
不用插件，命令行快速起服务的几种可靠方式
适合不想装插件、或需要复现生产环境结构的场景。核心原则：用 Node.js 工具起最小 HTTP 服务，不依赖构建流程。
- 全局装
http-server：npm install -g http-server，进项目根目录执行http-server -o（-o自动打开浏览器） - 用 Python（如果已装）：
python3 -m http.server 8000（Python 3）或python -m SimpleHTTPServer 8000（Python 2） - 注意：Python 自带服务不支持 SPA 的 history fallback，Vue/React 路由刷新 404；
http-server默认也不支持，需加-p 8000 -c-1 --cors -a localhost并配合index.html作为 fallback - Node.js 原生
http模块写三行也能跑，但没必要——轮子够用且稳定
Live Server 插件打不开页面？常见卡点
不是插件坏了，通常是路径、权限或端口冲突导致的静默失败。
- 检查当前打开的是否是 HTML 文件本身，而不是文件夹或 JS/CSS —— 右键菜单只在 HTML 文件上出现
- 看 VS Code 右下角状态栏有没有显示
Go Live按钮，没出现说明插件没生效，重启 VS Code 或重装插件 - 端口被占（比如另一台 Live Server 还在跑）：插件默认会顺延端口，但有时卡住；手动改配置项
liveServer.settings.port成5501试试 - 公司电脑可能禁用了本地回环（
localhost），尝试把地址改成http://127.0.0.1:5500，或者改配置项liveServer.settings.host为127.0.0.1
实际开发中，最容易被忽略的是：你以为只是“预览一下”，但只要用了现代前端特性（模块、fetch、相对路径资源引用），就再也绕不开 HTTP 服务这层。双击打开只适用于纯静态展示，连 ./script.js 都可能加载失败。