浏览器禁用 file:// 协议下的 fetch、import 等功能，因同源策略将各 file:/// 路径视为独立源；唯一可靠方案是使用 http://localhost 本地服务器（如 python -m http.server 或 live server）。
直接用 file:// 协议加载 HTML 文件，绝大多数现代浏览器（Chrome 117+、Edge、Firefox）会阻止 fetch()、XMLHttpRequest、ES 模块 import、localStorage（部分版本）、Service Worker 注册等行为——这不是你代码写错了，是浏览器主动拦截。
为什么 file:// 下 fetch('./data.json') 报错 net::ERR_FAILED
浏览器把每个 file:///xxx 路径视为独立源（origin），而跨“源”请求被同源策略禁止。即使 JSON 和 HTML 在同一文件夹，file:// 下也没有“同源”概念，所有相对路径请求都会被当成跨域处理。
-
fetch('./data.json')在file://下实际触发的是跨源读取，直接被拒绝 - 错误信息常见为：
net::ERR_FAILED、TypeError: Failed to fetch、控制台提示Blocked a frame with origin "null" from accessing... - 不是路径写错——换成绝对
file:///D:/.../data.json一样报错，协议本身不支持资源协商
Chrome 的 --allow-file-access-from-files 还管用吗
该参数在 Chrome 117+ 已标记为 deprecated，部分功能（如 fetch() 加载本地 JSON）可能仍无效；它仅对当前启动的 Chrome 实例生效，且无法绕过 WebKit（如 Safari）或新版 Edge 的底层限制。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- Windows 启动命令示例：
chrome.exe --allow-file-access-from-files --new-window "C:\project\index.html" - macOS 示例：
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files --new-window /Users/me/project/index.html - ⚠️ 不保证 100% 生效，尤其涉及
import.meta.url、动态import()或ServiceWorker时基本失效
真正能跑通现代 HTML 功能的本地运行方式
必须切换到 http://localhost 协议，让浏览器识别为合法服务端上下文。无需复杂配置，几秒就能起一个可用服务：
- 有 Python 3？终端进项目目录，执行：
python3 -m http.server 8000→ 访问http://localhost:8000 - 有 Node.js？推荐零依赖：
npx http-server -p 8000（自动临时安装并运行） - VS Code 用户：装
Live Server插件，右键 HTML 文件 →Open with Live Server（默认http://127.0.0.1:5500） - 注意端口避开 80/443（需管理员）和已被占的 3000/8080；如果页面用 SPA 路由（如 Vue Router history 模式），选支持 fallback 的工具（如
serve -s .）
哪些情况看似能用 file://，实则埋雷
双击打开后页面“看起来正常”，不代表逻辑可靠——尤其当后续要加 API 请求、缓存、PWA 或调试移动端 WebView 时，问题会集中爆发：
- 使用
localStorage：Chrome 94+ 对file://的存储 API 施加更严限制，可能抛SecurityError - 路径含中文或空格：Windows 下 URL 编码易出错，
script.js加载失败但无明确报错 - Android WebView 或 iOS WKWebView：原生容器默认禁掉
file://下的fetch和FileReader，连input[type="file"]选中后都拿不到完整路径 - ES 模块导入：
import { foo } from './utils.js'在file://下直接报Failed to resolve module specifier
别纠结怎么“骗过”浏览器的安全机制，http://localhost 是唯一稳定、可复现、与生产环境一致的本地开发路径。工具链再轻量，也比反复调试 file:// 下的玄学失败省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
