双击或用file://协议打开index.html功能异常，因浏览器安全策略限制fetch、import等api，且绝对路径在本地解析失败；正确方式是启动本地http服务（如http-server）并确保index.html位于服务根目录。
浏览器不自动识别 index.html，绝大多数情况不是代码问题，而是你根本没用对方式打开它——双击、拖进浏览器、或用 file:// 协议访问，都会绕过服务器逻辑，触发浏览器安全限制或路径解析失败。
双击打开 index.html 为什么功能异常？
现代浏览器（Chrome/Firefox/Safari）对 file:// 协议做了严格限制：fetch、import、Service Worker、甚至部分 localStorage 都会直接报错，错误信息类似 net::ERR_FAILED 或 Access to script at 'file://' is denied。这不是你的 JS 写错了，是协议层面被拦了。
- Windows 记事本保存时若没选“所有文件”类型，实际存成
index.html.txt，文件图标可能显示正常，但浏览器根本找不到真正的 HTML - 路径含中文或空格（如
/我的项目/index.html）会导致 URL 编码失效，file:///路径直接 404 - Vue/React 等框架打包后资源引用的是绝对路径（如
href="/css/app.css"），在file://下，/指向磁盘根目录，必然 404
http-server 启动后显示 “Index of /” 怎么办？
这说明服务器找到了目录，但没找到默认入口文件。它不是报错，是老实列出了你当前服务目录下的所有文件。
-
index.html不在你启动http-server的目录下？比如你在项目根目录运行http-server，但index.html其实藏在src/里 → 改用http-server src/ - 你用的是 Vue CLI 或 Create React App？它们的
index.html是模板，必须先npm run build生成dist/目录，再对dist/启动服务器 - 某些构建产物（如 Tailwind 项目）依赖构建步骤生成 CSS，源码里的
index.html直接跑肯定缺样式
手机上点开 index.html 为啥白屏或 404？
安卓和 iOS 默认不把 .html 文件关联到浏览器，点击只是调用文件管理器，不会自动用浏览器加载。
- 手动复制路径（如
file:///storage/emulated/0/test/index.html）粘贴进 Chrome 地址栏？大概率失败——路径含中文/空格、权限受限、或 Android 10+ 的 Scoped Storage 拦截了访问 - 微信/QQ 内置 WebView 完全屏蔽
file://，且禁用input[type=file]和部分localStorage，本地测试毫无意义 - 真正靠谱的方式：用 Termux（安卓）或 iSH（iOS）起一个本地 HTTP 服务，然后浏览器访问
http://192.168.x.x:8080；注意查设备局域网 IP，别用127.0.0.1
最常被忽略的一点：你以为的“打开 HTML”其实是两个完全不同的行为——开发阶段需要本地服务支撑模块加载与 API 调试，交付阶段则必须走真实 HTTP 协议并确保资源路径可解析。混淆这两者，90% 的“打不开”问题就已注定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
