是，base href 仅影响 html 解析阶段内联或 标签中的 url()，外部 css 文件中的 url() 不受影响；其作用限于纯相对路径，且依赖正确配置与位置。
base href 会影响 CSS 中的 url() 吗
会，但仅限于 HTML 解析阶段内联或通过 <style></style> 标签引入的 CSS 里的 url() 函数；外部 CSS 文件（<link href="theme.css">）中的 @import 或 url() 不受 <base> 影响——因为那是 CSS 引擎自己解析的。
也就是说：<style>body{background:url(avatar.jpg)}</style> 中的 avatar.jpg 会被重写为以 <base href="/assets/"> 为基准的路径；但 theme.css 文件里写的 background: url(avatar.jpg); 不会。
-
<style></style>内联样式中所有纯相对url(xxx)都受控 -
<link rel="stylesheet">加载的外部 CSS 文件，其内部url()完全不受<base>影响 -
<link rel="stylesheet">的href属性本身受控（比如href="css/main.css"→ 解析为/assets/css/main.css）
为什么 background: url(logo.png) 在上线后变成 404
常见原因是 <base href> 值非法，导致整条标签被浏览器静默忽略，于是 url(logo.png) 回退到按当前页面 URL 解析——而页面可能在子路径（如 /admin/），结果请求了 /admin/logo.png，而非预期的 /assets/logo.png。
- 检查
<base href>是否以http://、https://、//或/开头 - 确认结尾有斜杠：写成
/assets/✅，不是/assets❌（Firefox 会截断成/assetscss/） - 确保它在
最顶部，早于任何<style></style>或<link>
如何让 CSS 资源路径真正统一可控
靠 <base> 管理 CSS 里的 url() 是脆弱的——它只覆盖内联样式，且容易因配置错误失效。更可靠的做法是把资源路径交给构建工具处理。
- Vite 用户：设
build.base = "/myapp/"，它会自动重写所有<link href>和<script src></script>，但不会动<style></style>里的url()，所以这类路径建议改用new URL('./img.png', import.meta.url) - Webpack 用户：配合
HtmlWebpackPlugin+output.publicPath: '/myapp/'，可确保所有静态资源引用被正确前缀化 - 手写
<style></style>时，避免裸写url(logo.png)；优先用url(/myapp/images/logo.png)（根相对）或url(https://cdn.example.com/logo.png)（绝对）
SPA 部署在子路径时，CSS 图片路径出错的典型场景
Vue Router 设了 base: '/admin/'，HTML 也写了 <base href="/admin/">，但 <style>div{background:url(icon.svg)}</style> 还是 404——因为开发者误以为路由 base 和 HTML base 是联动的，其实它们完全独立，且 <base> 只影响解析时机，不改变运行时逻辑。
- Vue Router 的
base只控制导航行为，不影响资源加载 - HTML
<base>只在解析时生效，且只对纯相对url()起作用 - 如果用了 CSS-in-JS 或 PostCSS 插件（如
postcss-url），它们可能已将url()替换为绝对路径，此时<base>实际上没机会介入
最易被忽略的一点：你改了 <base href>，但忘了同步更新所有内联 <style></style> 里的 url() 路径逻辑，或者依赖了未被构建工具处理的手写路径。这种混合管理方式，不出问题才怪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
