绝对路径转相对路径需分场景：构建时用工具配置、服务端渲染可计算路径差、静态页宜用标签统一基准；JavaScript运行时不可靠，应由后端注入或CDN托管。
绝对路径转相对路径：先搞清 base URL 是什么
浏览器里所谓“绝对路径”（比如 /assets/js/main.js）其实不是文件系统意义上的绝对路径，而是相对于当前页面所在协议 + 域名 + 端口的根路径。它转不了真正的相对路径（如 ../js/main.js），除非你知道当前 HTML 文件在服务器上的物理位置和目标资源的位置关系——而这个信息浏览器不提供，服务端才可能知道。
所以真正在 HTML 中做转换，必须分清场景：
- 如果是构建时（如 Webpack/Vite），靠插件或配置把
/assets/xxx替换成基于输出目录结构的相对引用 - 如果是服务端渲染（如 Node.js/PHP），可计算文件系统路径差，生成正确
../层级 - 如果只是手写 HTML 或静态部署，别硬转——直接用
<base href="/">统一基准，保持所有路径以/开头更稳
用
<base href="/subdir/"> 会改变整个页面里所有相对路径的解析起点。比如页面在 https://example.com/subdir/page.html，加了这行后，<script src="js/app.js"></script> 就等价于加载 https://example.com/subdir/js/app.js，而不是默认的根路径。
常见错误现象：Failed to load resource: the server responded with a status of 404 ()，往往是因为没设 <base>，又把资源路径写成相对的，结果页面从不同路径访问时路径错乱。
立即学习“前端免费学习笔记（深入）”；
- 必须放在
内，且只能有一个 -
href值末尾带斜杠更安全（/subdir/而非/subdir），否则浏览器可能误解析 - 会影响
<a></a>、<img alt="在html中如何绝对路径为相对路径" >、<script></script>、<link>等所有带 URL 的属性
JavaScript 运行时无法可靠生成相对路径
有人想用 JS 拿 window.location.pathname 和目标路径做字符串截断来“算出”相对路径，比如把 /blog/post1/ 和 /assets/style.css 变成 ../../assets/style.css。这看起来可行，但实际踩坑多：
- URL 可能含查询参数或 hash，
pathname不代表真实路径层级 - 服务器路由是前端路由（如 React Router）时，
pathname和物理文件结构完全无关 - 不同环境（本地开发 / 预发 / 正式）的 base 路径不同，硬编码逻辑极易失效
- IE 对
new URL()支持有限，兼容性差
真正需要动态路径的场景（如 CMS 生成的富文本），应该由后端注入正确的相对路径，或统一走 CDN 域名 + 版本哈希（https://cdn.example.com/v1.2.3/js/app.js），绕过路径计算。
Vite/Webpack 构建时改 public 目录引用方式
如果你用 Vite，放 public/ 下的文件（如 public/logo.png）在 HTML 中引用必须用绝对路径 /logo.png，构建后仍保留该路径。想让它变成相对路径（比如部署到子路径 /my-app/ 时自动适配），得改两处：
- 在
vite.config.js中设base: "/my-app/" - HTML 中所有
src/href改用相对写法（./logo.png），或确保它们是模块导入（import logo from './logo.png'） - 注意：Vite 的
public目录内容不会被重写路径，所以别往里面放需要动态 base 的资源
Webpack 类似，关键是 output.publicPath 和模板中路径写法的配合。混淆点在于：构建工具只处理它“知道”的路径（即 JS/CSS/HTML 模板里的字符串），不会去解析 HTML 字符串内部拼出来的 URL。
路径问题最麻烦的地方不在怎么转，而在“谁负责解析”——浏览器、构建工具、服务端、CDN 各管一段。一旦跨段落假设某处路径格式通用，八成就要修半夜。
