base href必须是绝对url或以/开头且结尾带斜杠的根相对路径，否则浏览器静默忽略；须置于最前且唯一，仅影响html属性中纯相对路径，不影响js/css运行时路径。
base href 必须是绝对 URL 或以 / 开头的根相对路径，否则浏览器静默忽略
整站静态化后，HTML 文件往往部署在子路径（如 /blog/、/zh-CN/）下，但页面里大量资源仍用 src="js/app.js" 这类纯相对路径。不设 <base>，浏览器就从当前 HTML 的 URL（比如 https://example.com/blog/post.html）出发解析，结果全部 404。
但写错一个字符就等于没写：浏览器只认 href 值以 http://、https://、// 或 / 开头，且根相对路径必须以 / 开头、/ 结尾。常见无效写法包括：
-
href="static/"（缺协议和根路径，被丢弃） -
href="../assets/"（含..，被丢弃） -
href="/myapp"（结尾没斜杠，Firefox 可能截断成/myappcss/） -
href="%PUBLIC_URL%/"（构建未替换，字面量发到浏览器，被丢弃）
✅ 推荐写法：href="https://cdn.example.com/v3/"（CDN 场景最稳）或 href="/blog/"（服务端路由可控时）。
base 标签必须放在 最顶部，且只能有一个
静态站点生成器（如 Hugo、Jekyll、VuePress）模板中，<base> 若插在 <title></title> 后或 <meta> 下方，部分浏览器会跳过已解析的 <link> 和 <script></script>，导致它们仍按原始 URL 加载——你改了，但没生效。
更隐蔽的问题是 SSR 或多模板拼接场景：header 模板输出一个 <base>，page 模板又输出一个，结果只有第一个生效，控制台可能提示 Multiple base elements detected. Only the first one is used.，但资源加载失败时你根本想不到是它。
正确顺序示例：
<base href="/blog/"><title>My Blog</title><link rel="stylesheet" href="main.css"><script src="app.js"></script>
SPA 静态化部署时，base 标签和前端路由必须显式对齐
整站静态化常用于 SPA 打包后的产物（如 Vite 构建的 dist 目录）。此时 <base href="/admin/"> 只影响 HTML 解析阶段的 src、href，但 Vue Router 的 router.push('/home') 或 React Router 的 <link to="/home"> 完全不读这个值。
若只配 HTML 的 <base>，不配路由的 base 参数，就会出现「图片能加载，链接却跳到根路径」的割裂行为。必须同步设置：
- Vue Router：
createRouter({ base: '/admin/' }) - React Router v6+：
<router basename="/admin"></router> - Vite：
build.base: '/admin/'（避免与手写<base>冲突）
⚠️ 注意：Webpack 的 publicPath 或 Vite 的 base 若与 HTML 中的 <base href="/a/b/"> 值重复，会导致路径拼两次，例如请求 /a/b//a/b/js/app.js —— 中间双斜杠直接 404。
哪些路径受 base 影响，哪些完全不受
整站静态化后，资源路径混乱常源于误判作用域。<base> 是 HTML 解析期的“一次性重定向”，不是运行时代理。它只改写以下属性中**纯相对路径字符串**（即不以 /、: 或协议开头）：
<img src="logo.png"><script src="app.js"></script><link href="style.css">- CSS 中的
background: url(avatar.jpg) <form action="submit.php"></form>
但它对以下内容完全无效：
-
fetch('./api/user')（仍以window.location为基准） import('./utils.js')- CSS
@import "reset.css" new Worker('./worker.js')
真正容易被忽略的是：JS 中调用 document.baseURI 能拿到 <base href> 的值，可用于构造 URL（如 new URL('data.json', document.baseURI)），但 window.location 和 document.URL 丝毫不变——别指望它能统一所有路径逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
