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 的那个安装。装完后：
通吃客零食网整站 for Shopex
下载
第一步】：将安装包中所有的文件夹和文件用ftp工具以二进制方式上传至服务器空间;(如果您不知如何设置ftp工具的二进制方式，可以查看：(http://www.shopex.cn/support/qa/setup.help.717.html)【第二步】：在浏览器中输入 http://您的商店域名/install 进行安装界面进行安装即可。【第二步】：登录后台，工具箱里恢复数据管理后台是url/sho
立即学习“前端免费学习笔记（深入）”；
- 右键编辑器里的 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 协议。这个边界不是“要不要好看”，而是“能不能跑起来”。
