绝对路径 /css/main.css 在子目录部署时会因缺失路径前缀而404；需配置构建工具 base 或 publicpath，避免硬编码，结合相对路径、自动注入和动态 base 等混合策略保障稳定性。
绝对路径写成 /css/main.css 却在子目录部署时 404
根相对路径（以 / 开头）看似稳定，但前提是网站必须部署在域名根目录下。比如你本地开发用 http://localhost:5173/，href="/css/main.css" 请求的是 http://localhost:5173/css/main.css，一切正常；可一旦部署到 https://example.com/myapp/，浏览器仍会向 https://example.com/css/main.css 发起请求——漏掉 /myapp/ 前缀，必然 404。
这不是路径写错，是部署上下文变了。Vite、Webpack 默认不自动修正这个前缀，除非你显式配置：
- Vite：设
base: "/myapp/"（vite.config.ts） - Webpack：设
output.publicPath: "/myapp/" - 没配？那所有
/xxx路径都会指向错误位置
<base href> 会全局影响所有相对路径，但容易被忽略
有人想绕过根路径问题，手动加 <base href="/myapp/"> 到 里。这确实能让 href="css/main.css" 变成请求 /myapp/css/main.css，但它不只改 <link>，还会影响所有相对路径的 <a href></a>、<img src>、window.location 等行为。
常见翻车点：
- 页面内有个
<a href="contact.html"></a>，本意是跳转同目录下的 contact.html，结果变成跳/myapp/contact.html—— 如果该文件实际在/myapp/pages/contact.html，就 404 - JS 里用
fetch("./api/data.json")，也会被 base 强制重定向到/myapp/api/data.json - 多个页面共用同一份 HTML 模板，但部署路径不同，
<base>无法动态切换
本地双击打开 HTML 文件时，/xxx 路径直接失效
用文件协议 file:// 打开 HTML（比如双击桌面 index.html），浏览器会把 /css/main.css 解析为磁盘根目录，例如 C:/css/main.css（Windows）或 /css/main.css（macOS），而不是你项目里的文件夹。此时 Network 面板能看到明确的 “Failed to load resource” 错误，且 Initiator 显示是 file:// 协议。
这不是 bug，是规范行为。解决方法只有两个：
- 开发阶段别双击，统一用
python3 -m http.server或vite preview启服务 - 构建产物若需离线使用（如电子手册），就得放弃
/xxx，改用相对路径或内联关键 CSS
构建工具生成带 hash 的文件名，但硬编码 /css/main.css 不会自动更新
Webpack/Vite 默认会把 CSS 输出为 /assets/index.a1b2c3.css 这类带哈希的文件，以实现缓存控制。但如果你在 HTML 里手写 <link rel="stylesheet" href="/css/main.css">，构建后这个路径不会变——浏览器永远请求旧路径，返回 404。
正确做法是让构建工具注入真实路径：
- Vite：用
import './style.css'让插件自动注入<link>标签 - Webpack + HtmlWebpackPlugin：用
templateParameters或html-webpack-plugin的inject: true自动插入 - 纯手写 HTML？那就得配合构建脚本替换字符串，或改用
public/目录下的静态资源（不走 hash）
绝对路径不是“一劳永逸”，它把路径可靠性从“文件位置关系”转移到了“部署结构一致性”上。一旦部署路径、服务协议、构建流程或运行环境出现偏差，/xxx 就是最先报错的那个。真正稳的方案，往往是混合策略：构建期生成真实路径 + 运行时用 <base> 或服务端重写兜底，而不是靠人眼写死一个斜杠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
