绝对路径以/开头时基准是域名根(如https://example.com/),而非本地文件夹或/public目录;404主因是HTML路径、服务器映射、构建输出三者未对齐,需通过Network面板查看真实Request URL并核对Nginx root、alias及构建base配置。

绝对路径以/开头,基准永远是域名根(https://example.com/),不是开发时的本地文件夹或构建工具默认的/public目录。出404不是因为“写错了”,而是/xxx被浏览器发出去后,服务器找不到对应物理路径——三者没对齐:HTML里写的路径、Nginx/Apache实际映射的磁盘位置、构建产物输出结构。
看Network里真实的Request URL再动手改
别凭感觉改href或src。打开开发者工具 → Network → 刷新 → 找红色404项 → 点开看Headers下的Request URL。这个地址才是真相。
- 如果显示
https://example.com/css/style.css,但你服务器上文件实际在/var/www/myapp/assets/css/style.css,说明Nginx的root设太浅,或者HTML该用/assets/css/style.css - 如果
Request URL带子路径(如/admin/css/style.css),检查是否误加了<base href="/admin/">,且没同步改构建配置 - 如果URL含端口(如
:8080),说明本地开发服务没关干净,浏览器还在连旧地址
Nginx中root与location对不上就必然404
root指令决定/开头路径映射到哪一级磁盘目录。写错一级,所有绝对路径全崩。
-
root /var/www/html;→/css/style.css对应/var/www/html/css/style.css -
root /var/www/html/myapp;→ 同样/css/style.css就变成/var/www/html/myapp/css/style.css - 用了
alias必须注意末尾斜杠:location /static/ { alias /data/static/; }是对的;alias /data/static;(缺/)会导致/static/js/app.js映射成/data/s,直接截断
Vite/Vue CLI等构建工具的base必须和服务端配置一致
构建工具会重写所有绝对路径,但前提是它知道部署在哪。不配或配错base,生成的index.html里<script src="/assets/index.abc123.js">就全是错的。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记(深入)”;
- Vite项目:确认
vite.config.ts中base: "/myapp/",且Nginx的root指向/var/www/html/myapp,或配location /myapp/ { alias /var/www/html/myapp/; } - CRA项目:检查
package.json的homepage字段是否为"https://example.com/myapp"或"./"(相对部署) - 没配
base却用了子路径部署?浏览器发出的/assets/xxx请求,服务端根本没地方接
Linux服务器大小写敏感是上线后突然404的高频原因
Windows本地开发时不报错,一上Linux服务器全挂。路径里任何一个字母大小写不对,就是404。
- HTML中写
<link href="/CSS/main.css">,但真实目录是css(小写)→ 404 - 图片文件叫
Logo.png,src写成logo.png→ 404 - 用SSH登录服务器,逐级执行
ls -l /var/www/html/、ls -l /var/www/html/assets/,确认每一级目录名、文件名、扩展名完全一致
最常被忽略的是:构建产物(如dist/)默认输出结构,和Nginx的root指向目录之间差了一层。比如Vite输出到dist/,你却把Nginx的root设成了/var/www/html,而没把整个dist/内容拷进去——那/开头的所有请求,服务器连根目录都摸不到。


















