404错误主因是服务器未找到请求路径，需确认文件部署位置、大小写一致性、服务器默认首页配置、SPA路由fallback设置及CDN缓存污染。
HTML5网页上传后直接报404，先确认服务器是否真把文件放对了位置
404不是代码写错了，而是服务器根本没找到你请求的路径。常见情况是：本地双击 index.html 能打开，一传到服务器就 404——说明浏览器地址栏访问的路径和服务器上实际存放的路径不一致。
实操建议：
- 检查浏览器地址栏 URL，比如显示
https://example.com/myapp/，那服务器上必须存在一个myapp/目录，且该目录下有index.html - FTP 或 SFTP 上传时别漏掉文件夹层级；用命令行上传（如
scp）注意末尾斜杠：scp -r ./dist/ user@server:/var/www/html/myapp/（带斜杠表示进目录，不带会把 dist 当文件名） - 部分主机控制面板（如 cPanel）默认根目录是
public_html，不是www或htdocs，上传前查清文档根路径
静态 HTML5 页面被当成动态资源处理，导致路由失效（尤其用了 History 模式）
如果你用 Vue CLI、Vite 或 React Router 的 createBrowserRouter 并启用了 HTML5 History 模式，/user/profile 这种地址在刷新时会触发服务器找 user/profile.html，但实际不存在，于是返回 404。
这不是前端 bug，是服务器配置缺失。解决核心是：所有非资源请求（如 .js、.css、.png）都应 fallback 到 index.html。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- Nginx 配置里加
try_files $uri $uri/ /index.html;到location /块中 - Apache 需启用
mod_rewrite，并在.htaccess中写：RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L] - Vercel / Netlify 等平台默认支持 SPA fallback，但需在项目根目录加
vercel.json或_redirects显式声明，否则子路径仍可能 404
文件名大小写、扩展名或默认首页设置引发 404
本地 Windows 系统不区分 Index.html 和 index.html，但 Linux 服务器（绝大多数 Web 服务器运行环境）严格区分。同时，服务器未必默认把 index.html 当首页。
实操建议：
- 统一使用小写文件名：
index.html、main.js、style.css，避免INDEX.HTM类命名 - 检查服务器配置中
index指令是否包含index.html（Nginx 默认有，Apache 需确认DirectoryIndex行含该项） - 如果部署到子路径（如
https://a.com/app/），确保前端路由 base 设置正确：createRouter({ history: createWebHistory('/app/'), ... })，否则router.push('/')会跳到根域
CDN 或缓存中间层返回了旧的 404 响应
有些 CDN（如 Cloudflare）或反向代理会缓存 404 响应，即使你已修复路径，用户仍看到“页面未找到”。这不是服务器问题，而是缓存污染。
实操建议：
- 首次部署后，用隐身窗口 + 强制刷新（
Ctrl+Shift+R）测试，排除本地缓存干扰 - 在 CDN 后台手动 Purge 缓存，或临时关闭 CDN 测试是否恢复
- 检查响应头：
curl -I https://yourdomain.com/，确认HTTP/2 404是来自源站还是 CDN；若cf-cache-status: HIT，说明是 Cloudflare 返回的缓存 404
最常被忽略的是：开发时依赖本地服务（如 vite preview 或 python -m http.server）能跑通，就误以为生产环境路径也一样。真实服务器没有“自动补全路径”或“友好重定向”，它只认你部署的物理结构和明确配置的规则。
