直接打开 index.html 会白屏或报错，因 file:// 协议下浏览器禁用外部资源加载、模块导入、fetch 和 localstorage；必须通过 http 服务（如 acode 预览、ksweb 或 python 本地服务器）运行。
直接点开 index.html 文件大概率会白屏、报错或只显示 HTML 骨架——这不是你代码写错了，是手机浏览器在 file:// 协议下根本没法加载外部资源、执行模块、发起 fetch() 或读取 localStorage。
为什么用浏览器点开 index.html 会白屏或报错
安卓和 iOS 的 Chrome、Safari、Edge 等都默认禁用 file:// 下的跨域相关能力。哪怕只是写了这一行：
import { render } from './utils.js'
或者
fetch('/data.json')
都会失败，控制台明确提示：
Access to script at 'file:///xxx.js' from origin 'null' has been blocked
Failed to load module
Cross origin requests are only supported for protocol schemes: http, data, chrome, https
这不是 bug，是浏览器安全策略强制限制——file:// 不算合法源（origin），所有现代 Web API 都被阉割。
常见表现包括：
- CSS 和图片不显示（相对路径解析失败）
- JS 报 404 或静默不执行
- 页面空白，但右上角地址栏显示
file:///... - 微信/QQ 里点开直接调起腾讯文档预览，连 JS 都不跑
安卓手机手动输入 file:// 路径打开（仅限纯静态页）
如果你确认这个 index.html 没引用任何外部 JS/CSS、不用 fetch、没 import、所有样式脚本都内联，那可以试试手动输入路径。
关键细节必须对齐：
- 文件得放在公共目录，比如
/sdcard/Download/或/sdcard/Documents/ - 路径中不能有中文、空格、括号等字符；如有，空格要写成
%20，中文建议直接重命名成英文 - Chrome 地址栏输入格式严格为：
file:///sdcard/Download/index.html（注意是三个斜杠） - 部分安卓版本需开启「文件访问权限」给浏览器，否则直接 404
路径不对的典型错误：
file://sdcard/Download/index.html（少一个 / → 无效协议）
file:///storage/emulated/0/我的网页/index.html（含中文 → 404 或乱码）
真正能跑起来的三种方式（推荐按顺序试）
只要页面用了外部资源、ES 模块、AJAX、localStorage，就必须走 HTTP 协议。以下三种是实测有效的：
-
Acode / QuickEdit 编辑器：安装后打开 App → 找到
index.html→ 点「预览」按钮。它会自动起http://127.0.0.1:xxxx，无需配置，适合单文件快速验证 -
KSWEB（安卓）或 ServerDog（iOS）：把整个项目文件夹（含
index.html、js/、css/）放进它的根目录（如/ksweb/www/），启动服务后访问http://localhost:8080 -
电脑起服务 + 手机同 WiFi 访问：在项目根目录运行
python -m http.server 8000，手机浏览器访问http://192.168.x.x:8000/index.html（查电脑局域网 IP 即可）
注意：Acode 的 WebView 不支持 Service Worker 和某些现代模块特性；KSWEB 对 import map 响应很弱；ServerDog 在 iOS 上无法监听 localhost，得靠 Bonjour 或手动输 IP。
容易被忽略的兼容性硬伤
哪怕你成功起了 HTTP 服务，下面这些仍可能失效：
- iOS Safari 对
localStorage在非 HTTPS 的 HTTP 服务下限制更严，部分版本直接返回null - 所有移动端 WebView（包括 Acode、KSWEB 内置的）都不支持
navigator.serviceWorker注册 - 用了
<script type="module"></script>但没配Content-Type: text/javascript？Android Chrome 可能静默失败 - 路径写成
./data.json没问题，但写成data.json（无点斜杠）在某些 WebView 下会拼到根域名下，404
最稳妥的底线是：别依赖 file://，也别假设所有 HTTP 服务容器行为一致；只要涉及模块、API、存储，就得在真实环境（http:// + 完整路径 + 显式 MIME）里验证。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
