base标签仅影响HTML中link引入的CSS内url()函数的路径解析，对CSS的@import、JS动态import()、fetch及XMLHttpRequest等均无效。
base标签对CSS文件内@import路径完全无效
HTML中的<base href="/app/">不会改变CSS文件里@import "reset.css"的解析逻辑。浏览器加载style.css后，其中的@import仍以style.css自身所在URL为基准拼接路径——比如style.css在https://example.com/css/style.css，那@import "reset.css"就会请求https://example.com/css/reset.css，和<base>无关。
常见翻车点：
- 误以为加了
<base href="/cdn/">就能让所有CSS依赖走CDN，结果@import资源404 - 在构建产物中把CSS挪到
/static/css/，但没同步调整@import相对路径，导致样式断裂
base标签对JS模块动态import()路径也完全无效
<base href="/v2/">对import('./utils.js')、import('./components/Button.vue')这类运行时动态导入毫无影响。它们始终按当前JS模块的URL（即该JS文件实际部署位置）解析相对路径。
例如页面HTML在https://example.com/blog/post.html，加载了https://example.com/js/app.js，而app.js里写了import('./lib/helpers.js')，那浏览器会请求https://example.com/js/lib/helpers.js，不是https://example.com/v2/js/lib/helpers.js。
立即学习“前端免费学习笔记（深入）”；
真正受影响的只有HTML中硬编码的<script src="main.js"></script>这类静态引用。
base标签只影响HTML解析阶段的CSS url()函数
这是唯一穿透进CSS的场景：<base href="/assets/">会让HTML中<link rel="stylesheet" href="theme.css">加载的CSS里出现的background: url(icon.png)被解析为/assets/icon.png——注意，这个计算发生在HTML解析时，不是CSS引擎自己resolve的。
但以下情况都不受控：
-
background: url(/images/logo.svg)（根相对路径） -
background: url(https://cdn.com/bg.jpg)（绝对URL） -
background-image: image-set("icon-2x.png" 2x)（不走url()语法）
JS中fetch和XMLHttpRequest路径不受base控制
无论<base href="/api/v1/">怎么写，fetch('users')、fetch('./data.json')、XMLHttpRequest.open('GET', 'status')全部按当前页面URL（window.location）拼接，不会自动加上base前缀。
容易踩坑的写法：
- 前端路由部署在子路径（如
/admin/），又用fetch('api/list')——结果请求的是/admin/api/list而非后端期望的/api/list - 误信base能统一API前缀，上线后所有接口404
真正可靠的方案是：API路径显式写成根相对（fetch('/api/users')）或绝对（fetch('https://api.example.com/v1/users')），别依赖<base>碰运气。
