拖拽HTML文件到Chrome空白标签页是最稳妥的本地打开方式，因Chrome不拦截file://协议；需确保路径无中文/空格未编码、后缀为.html/.htm、非快捷方式，且Windows/macOS路径格式正确（如file:///C:/demo/index.html）。
直接拖进标签页是最稳的打开方式
chrome 不会拦截本地 file:// 协议的 html 文件，只要文件路径不含非法字符（比如中文全角符号、未编码的空格），拖拽到空白标签页就能立刻渲染。别信“必须用服务器”的说法——静态页面完全不需要。
常见错误现象：Failed to load resource: net::ERR_FILE_NOT_FOUND，基本是路径里有中文或空格没被正确编码，或者文件被移动/删除了；Access to script at 'file:///...' from origin 'null' has been blocked 则说明用了 fetch() 或 XMLHttpRequest 加载同目录下其他本地文件——这是 Chrome 的安全限制，不是操作错了。
- 拖拽前先确认文件后缀是
.html或.htm，不是.txt或隐藏了扩展名 - 右键「属性」看真实路径，避免误点快捷方式（.lnk）
- Mac 上从 Finder 拖拽时，如果 Dock 里 Chrome 图标上有红点，先点开再拖，否则可能新开一个被沙盒隔离的进程，导致 JS 读取同目录文件失败
地址栏输入 file:// 路径要小心斜杠和空格
Windows 下路径如 C:\demo\index.html，需转成 file:///C:/demo/index.html（注意三个斜杠，盘符后是正斜杠）；macOS/Linux 是 file:///Users/you/demo/index.html。路径里有空格？必须编码成 %20，比如 file:///D:/my%20project/index.html，直接写空格会 404。
容易踩的坑：file://C:/demo/index.html（少一个斜杠）→ 打开空白页且控制台无报错；file://localhost/C:/...（加了 localhost）→ 显示连接被拒绝；复制资源管理器地址栏路径时，系统常带 file:// 但缺第三个斜杠，得手动补。
- Windows 建议用 PowerShell 运行
Get-ChildItem .\index.html | ForEach-Object { $_.FullName }获取绝对路径，再替换\为/，开头加file:/// - macOS 终端进目录后执行
pwd+ls index.html，拼起来更可靠
需要 AJAX 或模块化开发时，必须绕过 file:// 限制
Chrome 对 file:// 页面施加了严格的跨源限制：无法用 fetch('./data.json')、不能 import 本地 JS 模块、localStorage 可能被禁用。这不是 bug，是设计使然——本地文件不该拥有网络权限。
真实使用场景：调试 Vue 单文件组件、跑一个带 JSON 数据的 Chart.js 示例、用 ESM 加载工具函数。这些都卡在 net::ERR_FAILED。
- 最轻量解法：命令行起个最小 HTTP 服务，Python 3 写
python3 -m http.server 8000，然后访问http://localhost:8000/index.html - VS Code 用户装插件
Live Server，右键 HTML 文件选「Open with Live Server」，自动处理路径和 MIME 类型 - 千万别用
--disable-web-security启动 Chrome，这会关闭全部安全策略，不仅危险，新版 Chrome 已默认忽略该参数
移动端 Chrome 打不开本地 HTML？因为根本没这个入口
Android/iOS 的 Chrome App 不支持 file:// 访问本地文件系统，没有地址栏输路径的功能，也不能拖拽。所谓“下载后点击打开”，实际调用的是系统默认浏览器或文档查看器，很可能渲染异常或禁用 JS。
如果你真要在手机上快速验证页面效果，唯一靠谱路径是：把文件传到临时服务器（如 ngrok 或 localtunnel），用手机访问生成的公网 URL；或者用专用 App 如 HTML Viewer（Android）或 Textastic（iOS），它们内置 WebKit 渲染引擎且允许本地文件执行脚本。
容易被忽略的点：微信内置浏览器、QQ 浏览器等“壳浏览器”对 file:// 支持更差，连桌面 Chrome 的降级方案都不适用——这时候别纠结“怎么打开”，直接换环境。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
