<base> 标签仅在 HTML 解析阶段重置纯相对路径解析起点，必须置于 <head> 最前且唯一，href 值须为绝对 URL 或根相对路径（结尾带 /），否则静默失效；它影响 src、href 等属性中的纯相对路径，但不影响 fetch、import 等运行时路径；SPA 部署时需与路由、构建配置、Service Worker 严格对齐，否则导致 404 或路由错位。
<base> 标签不是路径“开关”，它只在 HTML 解析阶段重置纯相对路径（如 logo.png）的解析起点；写错 href 值、放错位置或混用运行时逻辑，会导致资源 404、锚点跳转异常、SPA 路由错位，且浏览器通常静默失败，不报错也不警告。
base href 必须是绝对 URL 或根相对路径（结尾带 /）
浏览器只接受以 http://、https://、// 或 / 开头的 href 值。其他写法一律被静默忽略——你不会看到控制台报错，但所有后续相对路径仍按当前页面 URL 解析，上线后批量 404。
-
<base href="assets/">❌ 无效：缺协议和根斜杠，被丢弃 -
<base href="../static/">❌ 无效：含..，不被识别 -
<base href="https://example.com">❌ 风险：结尾无/，Firefox 可能截断为https://example.comcss/ -
<base href="https://cdn.example.com/v3/">✅ 推荐：绝对 URL，CDN 场景最可控 -
<base href="/myapp/">✅ 合法：根相对路径，结尾斜杠不可省
base 必须放在 <head> 最前面且只能有一个
<base> 的作用时机是 HTML 解析自上而下的过程，它只影响其后出现的相对路径。顺序错了、位置错了、数量多了，等于没写。
- 放在
<body>里 → 浏览器直接忽略，无提示 -
<head><link href="main.css"><base href="/app/"></head>→main.css已按原始页面 URL 解析完毕，<base>对它完全无效 - SSR 模板拼接或组件内动态插入两个
<base>→ 只有第一个生效，Chrome 控制台会提示Multiple base elements detected. Only the first one is used. - 用 JS 动态创建并
appendChild()→ 解析阶段早已结束，无效
哪些属性真正受 base 影响，哪些完全不受
<base> 是 HTML 解析层规则，不是运行时全局代理。它只改写特定属性中“纯相对路径”（即不以 /、: 或协议开头）的初始拼接逻辑。
立即学习“前端免费学习笔记（深入）”；
- ✅ 真正受影响：
<img src="icon.png">、<script src="app.js">、<link href="style.css">、<a href="about.html">、<form action="submit.php">、CSS 文件中的background: url(avatar.jpg)（注意：这是 HTML 解析时计算的） - ❌ 完全不受影响：
fetch('./api/user')、import('./utils.js')、@import "reset.css"、<iframe src="/admin/frame.html">（根相对路径）、<img srcset="logo-2x.png 2x"> - ⚠️ 半受影响：
document.baseURI返回<base href>的值，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL完全不变
SPA 部署子路径时，base 与路由/构建配置必须对齐
部署在 https://example.com/a/b/c/ 时，<base href="/a/b/c/"> 和前端框架配置若不一致，资源加载和路由行为就会割裂。
- 只设
<base href="/a/b/c/">，但 Vue Router / React Router v6+ 未显式传入base: '/a/b/c/'→router.push('/home')会跳到/home（根路径），不是/a/b/c/home - Webpack 的
publicPath和手写的<base href="/a/b/c/">若值相同 → 资源路径可能被拼两次，如/a/b/c//a/b/c/js/app.js - Vite 构建时已设
base: '/a/b/c/'→ HTML 中就不该再手动加<base>标签 - Service Worker 缓存策略若依赖
self.location.origin + '/a/b/c/'，而 HTML 没配<base>→ 预缓存路径错位，导致离线失败
最麻烦的不是配置本身，而是构建产物、CDN 缓存、Service Worker、前端路由四者对同一路径前缀的依赖必须严格一致；漏掉一个环节，就出现资源 404 或白屏，且问题常延迟暴露，上线后才集中爆发。
文章来自机圈观察员网，发布者：，转载请注明出处：https://www.jqgcy.com/xinjizixun/123944.html
