VS Code 中应使用 Live Server 插件启动本地 HTTP 服务器（如 http://127.0.0.1:5500）来打开 HTML 文件，避免 file:// 协议导致 fetch、ESM 模块等因安全限制失效。
VS Code 里写完 HTML 怎么快速在浏览器打开
直接按 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Live Server: Open with Live Server 回车——这是最稳、最常用的方式。别手动找文件双击，也别用右键“在浏览器中打开”，那会触发 file:// 协议，很多功能（比如 fetch、模块导入、Service Worker）直接报错或不生效。
为什么不能双击 HTML 文件？
因为浏览器出于安全限制，对本地 file:// 协议禁用了跨域相关能力。常见表现包括：
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of ""-
Access to fetch at 'http://localhost:3000/api' from origin 'null' has been blocked（注意 origin 是null） -
Cannot use import statement outside a module（ESM 模块加载失败）
这些都不是你代码写错了，是协议层卡死了。用本地服务器（哪怕只是 Live Server 这种轻量的）就能让地址变成 http://127.0.0.1:5500/xxx.html，一切回归正常。
Live Server 插件怎么装和配
在 VS Code 扩展市场搜 Live Server，选作者是 Ritwick Dey 的那个安装。装完后：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 右键编辑器里的 HTML 文件 → 点
Open with Live Server - 或者快捷键
Alt+L Alt+O（Windows/Linux） /Option+L Option+O（macOS） - 默认端口是
5500，想改就在设置里搜liveServer.settings.port，填个新数字就行 - 它会自动监听文件变化，保存即刷新，不用手动 F5
没装插件时的临时替代方案
如果临时不能装插件（比如公司电脑权限受限），可以用 Node 自带的简易服务：
- 确保已装 Node.js，在项目根目录运行：
npx http-server -o -
-o表示自动打开浏览器，-p 8080可指定端口 - 注意：它不会像 Live Server 那样自动刷新，但至少解决了
file://问题 - 别用 Python 的
python -m http.server—— 默认不支持index.html自动路由，访问时得手动输完整路径
真正容易被忽略的是：哪怕只是写个静态页面，只要用了现代前端特性（import、fetch、localStorage 在某些上下文），就必须走 HTTP 协议。这个边界不是“要不要好看”，而是“能不能跑起来”。
