404错误页必须由服务端返回http 404状态码，前端跳转（如window.location.href或）仅返回200，会导致搜索引擎误收录、用户刷新异常；需用curl -i验证响应头，nginx/apache/express等须正确配置error_page或res.status(404)，静态托管须严格命名/404.html并内联样式。
404错误页不能靠前端跳转“假装”出来——window.location.href = '/404' 或 <navigate to="/404"></navigate> 返回的仍是 200 状态码，搜索引擎当正常页面收录，用户刷新后也回不到上一页。
服务端必须显式返回 404 状态码
浏览器和爬虫只认响应头里的 Status: 404 Not Found，不看页面上写了几个“404”。本地双击 HTML 文件打不开验证逻辑，必须走 HTTP 协议。
- 用
curl -I https://yoursite.com/abc检查第一行是否为HTTP/1.1 404 Not Found - Nginx 配置需两步：在主
location /块加try_files $uri $uri/ /index.html;（仅用于 history fallback），再单独声明location = /404.html { internal; }，并确保该路径被error_page 404 /404.html;指向且不返回 200 - Express 中必须写
res.status(404).sendFile(path.join(__dirname, '404.html'))，不能只sendFile() - 静态托管如 GitHub Pages 要求文件名严格为
/404.html且放在根目录；Netlify 需在_redirects中写/* /404.html 404
HTML 文件本身要精简、内联、无依赖
404 页面可能出现在资源加载失败时（比如 /assets/main.css 本身 404），若它再请求外部 CSS/JS，会触发级联失败，导致白屏或样式错乱。
- 所有样式必须用
<style></style>内联，禁用@import和外部<link rel="stylesheet"> - 字体用系统栈：
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif - 不依赖 JavaScript 渲染核心内容；按钮用
@#@#@#@#@#@#@#@#@#@0，别写<button onclick="location.href=..."></button> -
<title></title>必须含 “404”，<h1></h1>必须直写 “页面未找到(404)”，<main></main>或role="main"容器不可少
前端路由 history 模式下，Nginx/Apache 必须配 fallback
Vue Router 或 React Router 的 history 模式让 URL 看起来干净，但刷新时浏览器直接向服务器发请求。没配 fallback，服务器根本不知道该返回哪个 HTML，就真 404 了。
- Nginx 示例：
location / { try_files $uri $uri/ /index.html; }—— 注意这个规则不能套在location ^~ /api/这类代理块里，否则 API 请求也会被兜底 - Apache 需启用
mod_rewrite，.htaccess中写：RewriteRule ^(.*)$ /index.html [QSA,L]，并确保AllowOverride All - 本地开发别用
python -m http.server或npx serve测试 history 路由，它们不支持 fallback；改用vite preview或npx serve -s
绝对路径跳转 + referrer 判断才是安全返回逻辑
用户点“回到上一页”按钮，如果 document.referrer 是空、跨域或指向一个已失效地址，直接 history.back() 会再次 404，体验更差。
- 按钮链接应为
@#@#@#@#@#@#@#@#@#@1，JS 中先判断：if (document.referrer && new URL(document.referrer).origin === location.origin) { ... } - 动态设置
href为document.referrer，否则保持#并加aria-disabled="true" - 所有内部跳转用绝对路径：
/、/blog、/search，避免./about或user/profile这类相对路径拼错 - 别用
meta http-equiv="refresh"或setTimeout自动跳转——这会让状态码变成 200，彻底废掉 SEO 价值
最常被忽略的一点：404 页面不是“设计完上传就完事”，它必须在真实 HTTP 上验证状态码、路径解析、资源加载三者同时成立。任何一环断开，就等于没做。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
