当直接在浏览器中打开本地 html 文件时，由于安全限制，相对路径链接可能失效；本文详解原因、解决方案及移动端离线部署的最佳实践。
在本地开发轻量级网页应用（如校园考勤系统）时，常希望完全脱离网络，将所有资源（HTML、CSS、JS、图片等）存于手机或电脑本地存储中直接运行。你遇到的 ERR_FILE_NOT_FOUND 错误，本质并非路径书写错误，而是浏览器的安全策略与文件协议（file://）的局限性共同导致的。
✅ 正确前提：确保文件结构无误
首先确认 file1.html 和 file2.html 确实位于同一目录下，例如：
/attendance/ ├── file1.html └── file2.html
此时，GO TO FILE2（无需 ./）是语义正确且推荐的写法。./ 在 file:// 协议下虽合法，但部分浏览器（尤其是 Chrome）对 file:// 下的相对路径解析更严格，建议省略前缀以提升兼容性。
⚠️ 根本原因：file:// 协议的限制
Chrome、Edge 等基于 Chromium 的浏览器默认禁止 file:// 页面发起某些跨文件操作（如读取同目录其他 HTML 的完整 DOM），但超链接跳转本身是允许的——前提是：
你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型
立即学习“前端免费学习笔记（深入）”；
- 文件路径真实存在；
- 未启用 --disable-web-security 等危险调试参数（不推荐，且移动端无法配置）；
- 未通过双击桌面快捷方式等方式“间接”打开（可能导致路径解析异常）。
✅ 正确打开方式：
在文件管理器中右键 → “在浏览器中打开”，或拖拽 HTML 文件到已打开的 Chrome 标签页中，确保地址栏显示类似：
file:///storage/emulated/0/attendance/file1.html（Android）或
file:///Users/you/attendance/file1.html（macOS/Windows）
? 针对安卓手机的离线部署建议（关键！）
你提到需在校园弱网环境下运行考勤系统，以下是经验证的可行方案：
-
使用支持 file:// 友好跳转的浏览器
Chrome 在 Android 上对本地链接支持不稳定。推荐改用：- Kiwi Browser（Chromium 内核，支持扩展且 file:// 兼容性更好）
- Firefox for Android（对本地文件链接更宽容）
-
将整个项目打包为单页应用（SPA）
避免多 HTML 文件跳转，改用 JavaScript 动态切换内容，仅需一个 index.html：<!-- index.html --> <div id="page1" class="page active"> <h1>THIS IS FILE1</h1> <button onclick="showPage('page2')">GO TO FILE2</button> </div> <div id="page2" class="page"> <h1>THIS IS FILE2</h1> <button onclick="showPage('page1')">GO TO FILE1</button> </div> <script> function showPage(id) { document.querySelectorAll('.page').forEach(el => el.classList.remove('active')); document.getElementById(id).classList.add('active'); } </script> <style>.page { display: none; } .page.active { display: block; }</style> -
进阶：添加 PWA 支持（离线即用）
即使初始安装需一次联网，后续可完全离线运行：- 创建 manifest.json 和 service-worker.js；
- 在 index.html 中注册 Service Worker；
- 使用 Chrome 或 Kiwi 浏览器访问 http://localhost:5000（开发时）→ 添加到主屏幕 → 即可离线启动。
? 排查清单（快速定位问题）
- ✅ 检查文件名大小写：File2.html ≠ file2.html（Linux/Android 区分大小写）；
- ✅ 禁用浏览器广告拦截插件（某些插件会阻止 file:// 跳转）；
- ✅ 尝试用 Firefox 打开同一文件，确认是否为 Chrome 特定问题；
- ✅ 在 PC 上用 VS Code 安装 Live Server 插件启动 http://127.0.0.1:5500/ —— 此时所有相对链接 100% 正常，适合开发调试。
✅ 总结
ERR_FILE_NOT_FOUND 在本地 HTML 间跳转中，90% 源于路径不匹配或浏览器兼容性问题。最简可靠解法：确保同目录 + 省略 ./ + 换用 Kiwi/Firefox + 优先采用单页架构。对于考勤类工具，单页 + 本地存储（localStorage）即可满足数据持久化需求，彻底摆脱网络依赖。
