手机打开html提示404，根本原因是用file://协议双击运行，触发浏览器安全限制而非真实服务器错误；必须改用http服务（如python -m http.server）或确保路径与部署结构严格匹配。
手机打开 HTML 提示 404，基本不是页面写错了，而是你根本没在 HTTP 环境下运行它——双击打开 file:// 协议的 HTML 文件时，浏览器会拒绝加载相对路径的资源（比如 ./css/app.css、../pages/about.html），并报“404”，这其实是安全限制，不是真找不到文件。
为什么手机上双击 HTML 就 404
现代 Android 和 iOS 浏览器（Chrome、Safari、Edge）对 file:// 协议做了严格限制：禁止跨目录读取本地文件。哪怕路径写得完全正确，iframe src="../index.html" 或 img src="assets/logo.png" 都会直接失败，控制台显示 404（实际是被拦截，非服务器返回）。
- 这不是 bug，是安全策略，所有主流移动浏览器都这样
- 桌面端 Chrome 最新版本也已同步该限制（旧版可能侥幸成功）
- 微信内置浏览器、QQ 浏览器等 WebView 组件同样遵循此规则
- 错误现象典型：HTML 主体能显示，但图片/样式/脚本/iframe 全部报 404
用 python -m http.server 启服务后仍 404 怎么办
即使开了本地服务器，手机访问 http://192.168.x.x:8000/index.html 还是 404，说明路径或部署结构有问题：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 确认手机和电脑在同一局域网，且防火墙放行了 8000 端口
- Python 启动命令必须在 HTML 所在**根目录**执行：
python3 -m http.server 8000，不能在父级或子目录下运行 - 如果 HTML 中用了
<base href="/subapp/">，但你没把整个项目放在/subapp/路径下访问（比如实际访问的是http://ip:8000/），所有相对链接都会错位 - 检查 Network 面板里 404 请求的真实 URL：是
http://192.168.x.x:8000/css/style.css还是http://192.168.x.x:8000/subapp/css/style.css？后者说明<base>生效但部署路径不匹配
Vue/React 项目 build 后放到手机访问报 404
静态资源（JS/CSS）或路由跳转报 404，大概率是构建配置与部署路径没对齐：
- Vite 项目：检查
vite.config.ts中base是否设为"/"（默认）；若部署到子路径如https://example.com/myapp/，则必须设为"/myapp/"，且 HTML 中不能有额外<base> - React CRA：确认
package.json的homepage字段值与实际访问路径一致，比如"homepage": "https://example.com/myapp"，否则生成的src和href全部错位 - history 模式路由（如
/about）刷新 404：本地服务器不支持 fallback，python -m http.server和npx serve都不行；必须用vite preview或配好 Nginx 的try_files $uri $uri/ /index.html;
移动端 404 页面本身怎么确保有效
如果你在做 public/404.html，想让它在手机上真实生效，关键不在样式，而在状态码和加载可靠性：
- 必须通过真实 HTTP 访问验证：用
vite preview或nginx启服务，访问一个不存在的路径（如/xxx），在手机浏览器 Network 面板确认响应头含Status: 404 Not Found -
<link rel="stylesheet">和<script></script>全部删掉，CSS 写进<style></style>，JS 去掉——移动端弱网下外链失败 = 白屏或半页 - 所有图片用相对路径且确保存在，
<img src="404-icon.svg">就真得有这个文件，否则又触发一次 404 请求，形成嵌套失败 - 别信“加个 viewport 就行”——真正卡住的是状态码是否真实、资源是否零依赖、路径是否经得起子目录部署考验
最常被忽略的一点：很多人修了半天路径，却没意识到问题压根不在 HTML 里，而在于你一直用文件协议打开它。真正的修复动作只有两个：要么换 HTTP 服务，要么把所有路径改成绝对 file:///（不推荐，维护性差）。其他所有“改 href”“加 base”“调 vite 配置”的操作，都建立在你已经走 HTTP 的前提下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
