Chrome 禁止 file:// 协议下使用 fetch、import 等需 HTTP 的功能，因该协议无 origin 概念而被判定跨域；推荐用 Python http.server 或 VS Code Live Server 启本地 HTTP 服务调试。
直接双击或拖进 Chrome 标签页能打开 index.html，但只要页面用了 fetch()、import、localStorage（部分场景）或任何依赖 HTTP 协议的功能，就会立刻报错——这不是你代码的问题，是 Chrome 对 file:// 协议的硬性限制。
为什么 file:/// 路径下 fetch 会报 net::ERR_FAILED
Chrome 把 file:// 当作“无源”环境，禁止跨域相关行为，而现代前端加载 JSON、模块、字体、图片等资源默认走相对路径或 fetch 请求，底层仍被判定为跨域。即使文件都在同一目录，file:// 下也没有 origin 概念，浏览器直接拦截。
-
fetch('./data.json')→net::ERR_FAILED -
import('./module.js')→Failed to load module script -
new Worker('./worker.js')→SecurityError: Failed to construct 'Worker'
这些不是配置问题，是协议层面的封锁，改任何 header 或 meta 都无效。
用 Python 起本地服务最轻量且兼容所有系统
不需要装 Node.js，Python 3 自带 http.server，启动快、无依赖、路径无关。
- 终端进入
index.html所在目录：cd /path/to/your/project - 运行：
python3 -m http.server 8000（macOS/Linux）或py -3 -m http.server 8000（Windows） - 浏览器访问：
http://localhost:8000/index.html（不是file://）
注意：端口 8000 可换成任意空闲端口；如果项目有子目录结构（如 css/style.css），路径引用保持原样，无需加 / 前缀。
VS Code 的 Live Server 插件比手动起服务更省事
它不只是开个服务器，还会自动刷新、支持 HTTPS（可选）、处理多级路由（如 /about），而且对中文路径、空格、特殊字符完全免疫。
- 安装插件后，右键
index.html→ “Open with Live Server” - 首次运行会弹出新标签页，地址类似
http://127.0.0.1:5500/index.html - 后续编辑保存，页面自动刷新；关掉标签页，服务自动停止
它底层也是调用 Python 或 Node 启服务，但封装掉了路径编码、端口冲突、进程残留等细节——对新手和日常调试来说，这是最接近“零配置”的方案。
别信“右键 → 在浏览器中打开”这种快捷方式
很多第三方右键菜单工具（尤其 Windows 上的“Quick Look”类插件）会偷偷把 file:// 路径转成错误格式，比如保留反斜杠、漏掉一个 /、不编码空格，结果打开是空白页或 404，错误信息还藏在控制台里看不到。
- 正确
file://格式：Windows 是file:///C:/project/index.html（三个/，盘符后正斜杠） - 含空格路径必须手动编码：
file:///D:/my%20project/index.html，不能写my project - 中文路径即使编码也容易出问题，比如
%E4%BD%A0%E5%A5%BD在某些 Chrome 版本下仍失败
真正可靠的只有两种：拖拽进已打开的 Chrome 标签页（仅限纯静态页），或走 http://localhost（开发阶段唯一推荐路径）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
