本地开发CSS 404主因是file://协议下/路径指向磁盘根而非项目根，需用HTTP服务（如Live Server）或相对路径；CSS中url()基准为CSS文件自身位置，构建后易错乱，须统一配置publicPath或交由构建工具处理。
浏览器地址栏输的是 file:// 还是 http://
直接双击打开 HTML 文件，浏览器地址栏显示 file:/// 开头，这根本没走 Web 服务器，所有相对路径、AJAX、前端路由都会失效，点链接或刷新页面极易触发“找不到资源”的假 404。这不是服务器问题，是运行模式错了。
必须启动本地服务，用 http://localhost:8080/index.html 这类地址访问。常用方法：
- VS Code 安装 Live Server 插件，右键 HTML 文件选 “Open with Live Server”
- 终端执行
npx serve -s（需先npm install -g serve） - Python 用户可用
python3 -m http.server 8000（注意：不支持单页应用 history 模式 fallback）
Network 面板里哪个请求标了 404
打开浏览器开发者工具 → Network 标签页，刷新页面，找状态码为 404 的条目。重点看三列：Name（请求路径）、Status（确认真是 404）、Initiator（谁发起的）。
常见线索：
立即学习“前端免费学习笔记（深入）”；
- 如果
Name是index.html本身 404 → 服务器根目录没放对文件，或 DocumentRoot 配置错 - 如果是
js/app.js或css/style.css404 → 路径写错，或构建输出目录与 HTML 中引用路径不匹配 - 如果是
/user/profile这类前端路由路径 404 → 后端没配 fallback，不是前端代码问题 - 如果
Initiator显示是某个 JS 文件 → 错误发生在脚本里动态拼接的 URL，比如location.href = "pages/about.html"在子目录下会拼成错误路径
Vue/React 路由用 history 模式却没配服务端 fallback
Vue Router 或 React Router 开启 history 模式后，URL 看起来干净（如 /about），但刷新时浏览器会向服务器真实请求这个路径。Nginx、Apache 默认找不到对应文件，就返回 404。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
必须在服务端加 fallback 规则，把所有非静态资源请求兜底到 index.html：
- Nginx：在
location /块里加try_files $uri $uri/ /index.html; - Apache：确保启用
mod_rewrite，在.htaccess里加重写规则，捕获非文件/目录请求并重写为index.html - Vercel/Netlify：默认支持，无需额外配置；但自建 Node 服务（如 Express）必须手动实现类似逻辑
漏掉这条配置，本地开发可能正常（因 dev server 自带 fallback），一上线就 404。
后端接口路径和前端路由撞车了
当项目前后端共用一个域名（比如都走 https://api.example.com），而你前端跳转到 /order/list，后端恰好也定义了同名 API 路由（如 Spring Boot 的 @GetMapping("/order/list")），请求就会被后端提前截获——返回 JSON 或直接 404，前端路由根本没机会执行。
验证方法很简单：
- 看 Network 里那个 404 请求的
Response Headers中Content-Type是application/json还是text/html - 是前者 → 后端响应了，说明路由冲突；是后者 → 真是静态资源或前端路由 fallback 问题
- 临时在后端禁用该接口，再刷一次，如果前端页面出来了，就坐实了冲突
解决方式不是改前端，而是协调路由前缀，比如后端统一加 /api/，前端路由保持无前缀，或反过来明确隔离域。
真正卡住人的 404，往往不是路径写错，而是多个系统层叠作用的结果：前端拼路径时依赖当前 URL 上下文、服务端 fallback 没生效、后端路由又悄悄抢了请求。盯住 Network 里的具体请求路径和响应头，比猜“是不是我代码写错了”高效得多。
