html5静态网页如何做404页面_错误页自定义设置【方法】_技术教程

静态网页的404.html必须放在根目录且命名为404.html，GitHub Pages自动支持但限于绑定路径，Netlify/Vercel需配置重定向规则，页面需兼顾SEO与离线可用性。

静态网页没有后端，404 页面不能靠服务器动态返回，但只要文件存在、路径正确、被服务器识别，就能生效——关键不在“怎么写”，而在“放哪”和“怎么让服务器用它”。

这是最常踩的坑：很多人把 404.html 放在子目录（比如 /pages/404.html）或本地测试时双击打开，结果 404 始终不触发。

静态托管服务（如 GitHub Pages、Vercel、Netlify、Cloudflare Pages）默认只认根目录下的 404.html
本地用浏览器直接双击打开 file:// 协议，根本不会触发 404（没有 HTTP 状态码概念），必须通过本地服务器预览（如 npx serve 或 VS Code Live Server）
文件名必须严格是 404.html，不是 error404.html、404.htm 或带大小写混用（某些服务器区分大小写）

GitHub Pages 不需要额外配置，只要根目录有 404.html 就会自动接管所有 404 请求——但仅限于你绑定的域名或 github.io 子路径下。

如果你用的是项目站点（username.github.io/repo），404.html 只对 /repo/xxx 路径有效；访问 /other 这类非本项目路径，仍会跳 GitHub 默认 404
自定义域名下，404.html 生效；但若 DNS 解析异常或证书错误，用户根本到不了页面，自然也看不到你的 404.html
页面内链接建议用相对路径（如 ./index.html），避免硬编码 https://yoursite.com/ 导致离线失效

这些平台默认不自动 fallback 到 404.html，尤其当使用了前端路由（如 React Router）时，必须显式配置 404 行为。

Netlify：在根目录加 _redirects 文件，内容写一行：
```
/ * /404.html 404
```
Vercel：在根目录加 vercel.json，写
```
{
  "rewrites": [{ "source": "/(.*)", "destination": "/404.html" }]
}
```
——但注意这会覆盖所有 404，包括真实缺失的资源（如图片、CSS），更稳妥的是只重写 HTML 路由：
```
{"rewrites": [{ "source": "/(.+)", "destination": "/404.html" }]}
```
，再配合 cleanUrls: true
如果用了 index.html 的 history 模式路由，别把 404.html 当作兜底页来处理所有路径，否则真实 404 资源请求也会返回 HTML，导致控制台报错却没提示

404.html 是纯静态文件，但用户可能从搜索引擎点进来，也可能输错 URL，页面得自己“说清状况”。

真正难的不是写个好看的 404.html，而是确保它在各种部署环境里被正确识别——不同平台对“404 响应”的解释逻辑差异很大，同一份代码在 GitHub Pages 上好使，在 Netlify 上可能完全不触发，问题往往出在重定向配置或路径约定上。

17370845950