标签仅影响html解析阶段的特定属性（如a、img、script、link、form、meta refresh及css url()），不作用于srcset、绝对url、根相对路径、js/css模块导入或fetch等运行时api，且必须置于内唯一存在。
<base> 标签确实会统一改写页面中所有相对 URL 的解析起点，但它只对特定属性生效，且极易因部署路径、资源类型或动态加载方式出错。别指望它“一设就灵”，多数线上问题都源于误判了它的作用边界。
哪些 HTML 属性真正受 <base href="..."> 控制
浏览器仅在 HTML 解析阶段对明确用于资源定位的属性应用 <base>。这些属性包括：
-
<a href="about.html"></a>→ 解析为base.href+"about.html" -
<img src="logo.png">→ 同上 -
<script src="app.js"></script>和<link rel="stylesheet" href="style.css"> <form action="submit.php"></form>-
<meta http-equiv="refresh" content="0;url=success.html">中的url=值 - CSS 文件内
url()函数（如background: url(icon.svg)）——注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve 的
不生效的典型例子：<iframe src="/admin/frame.html"></iframe>（根相对路径）、<img src="https://cdn.com/logo.png?x-oss-process=image/resize,p_40">（绝对 URL）、<img srcset="logo-2x.png 2x">（srcset 不受控）。
<base> 放错位置或重复声明的后果
它必须是 的直接子元素，且整个文档中只能有一个。常见翻车点：
- 放在
里 → 浏览器完全忽略，控制台无报错但行为失效 - 模板拼接时 SSR 多次注入（比如 header 模板 + 页面模板各塞一个）→ 只有第一个生效，后续被丢弃，控制台可能提示
Multiple base elements detected. Only the first one is used. - 用 JS 动态插入（如
document.head.appendChild(baseEl)）→ 已解析的src/href不会重算，只影响之后新创建的元素（如后续document.createElement('img')）
最稳妥的做法：在 HTML 源码中手动确保它出现在 最顶部，且仅一次。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
CSS 和 JS 的 import 行为完全绕过 <base>
这是最容易被忽略的盲区。无论你设了 <base href="/v2/"> 还是 <base href="https://cdn.example.com/">，以下全部不受影响：
- CSS 文件内的
@import "reset.css"→ 仍按该 CSS 文件所在路径解析 - JS 中的
import('./utils.js')或import.meta.url→ 以模块自身位置为基准 -
fetch('./data.json')、new Worker('./worker.js')、XMLHttpRequest.open('GET', 'api/users')
换句话说：<base> 是 HTML 解析层的规则，不是运行时的全局 URL 重写器。混合部署（HTML 在主站、静态资源走 CDN）时，如果依赖 <base> 统一前缀，务必确认所有资源引用都是 HTML 层的 src/href，而非 JS/CSS 内部逻辑。
部署在子路径时，href 值该写成什么格式
关键原则：值必须是绝对 URL 或根相对路径（以 / 开头），不能是普通相对路径（如 ./app/）。
- ✅ 正确：
<base href="/blog/">（根相对，推荐，不绑定协议和域名） - ✅ 正确：
<base href="https://example.com/blog/">（绝对 URL） - ❌ 错误：
<base href="blog/">或<base href="./blog/">→ 浏览器会尝试拼到当前页面 URL 上，结果不可控
如果站点同时支持 HTTP/HTTPS、或需兼容 CDN 域名切换，优先用根相对路径；若必须指向 CDN，请确认所有被 <base> 影响的资源（尤其是 <script></script> 和 <link>）确实部署在该 CDN 路径下，否则 404 是必然结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
