绝对路径 /css/style.css 在项目站点（username.github.io/repo）下加载失败，因为浏览器将 / 解析为网站根路径 https://username.github.io/，而实际资源位于 https://username.github.io/repo/css/style.css，导致 404。
绝对路径 /css/style.css 在项目站点（username.github.io/repo）下必然 404，必须改用相对路径或显式声明 <base href="/repo/">。
为什么 /css/style.css 在项目站点里加载失败
GitHub Pages 用户站点（username.github.io）根路径是 /，所以 /css/style.css 解析为 https://username.github.io/css/style.css，能命中；但项目站点（username.github.io/repo）实际根路径是 /repo/，此时浏览器仍按字面解析 /css/style.css → https://username.github.io/css/style.css，而真实资源在 https://username.github.io/repo/css/style.css，结果就是 404。
浏览器不会“猜”你当前在哪个子目录下——它严格按 URL 开头的 / 判定为网站根路径。
- 用户站点：发布源为
main分支根目录 → 网站根路径 =/ - 项目站点：发布源为
main分支的docs目录 或gh-pages分支 → 网站根路径 =/repo/ - 所有以
/开头的资源路径（href="/css/style.css"、src="/js/app.js"）都按网站根路径解析，不随 HTML 文件位置变化
手动写 HTML 时：用相对路径或 <base href>
<base href> 是最轻量的修复方式，适合纯静态展示页。
立即学习“前端免费学习笔记（深入）”；
- 在
index.html的中添加：<base href="/repo/">（把repo换成你仓库名） - 之后所有相对路径（如
css/style.css、./img/logo.png）都会自动补上前缀，变成https://username.github.io/repo/css/style.css - 必须放在
内，且在任何<link>、<script></script>之前 - 不能写成
<base href="./">——.不会被 GitHub Pages 解析为当前子路径，它还是按服务器根处理 - 用了自定义域名（如
yoursite.com），<base href>值仍应填/repo/，不是https://yoursite.com/repo/—— 协议和域名由浏览器自动补全
Vite / Vue / React 构建项目：必须配 base 参数
构建工具生成的 HTML 依赖 base 控制资源前缀。若不设，打包出的 index.html 里所有 assets/ 引用仍是 /assets/xxx.js，必然 404。
- Vite 项目：在
vite.config.ts中设base: "/repo/"（不是/） - Vue CLI 项目：修改
vue.config.js的publicPath: "/repo/" - Next.js（
next export场景）：设置assetPrefix: "/repo/"
容易被忽略的关键点
<base href> 会影响整个页面所有相对 URL：链接、图片、表单 action 都会受其影响。如果你页面里有跳转逻辑（比如导航栏链接写成 about.html），确保它们也用相对路径写，否则可能跳到 https://username.github.io/repo/about.html 而不是你预期的同级位置。另外，CNAME 文件存在时，<base href> 依然要按 GitHub Pages 的路径（/repo/）写，而不是你的自定义域名路径——GitHub Pages 的路由解析完全独立于 DNS 和 CNAME。
