base href必须是绝对url或根相对路径，否则浏览器静默忽略；仅影响html解析阶段的纯相对路径（如img、script、link、a、css url()），不影响fetch、import、@import、srcset等运行时行为。

base href 必须是绝对 URL 或根相对路径，否则静默失效

浏览器遇到 <base href="assets/"> 这类写法，会直接跳过整个标签——不报错、不警告，但后续所有 <img src="logo.png"> 都按当前页面 URL 解析，404 风险极高。真正有效的只有两种形式：

• href="https://cdn.example.com/v3/"（绝对 URL，推荐用于 CDN 场景）
• href="/myapp/"（根相对路径，结尾必须带 /，否则 Firefox 会截断）

常见翻车点：href="../static/"、href="css/"、href="%PUBLIC_PATH%/"（未被构建工具替换时就是字面量字符串）全部无效。

哪些资源受 base 影响，哪些完全不受

<base> 只在 HTML 解析阶段起作用，改写的是纯相对路径（即不以 /、: 或协议开头）的初始解析逻辑。它不是全局代理，更不介入 JS/CSS 运行时行为。

✅ 真正受影响的：

• <img src="icon.png">
• <script src="app.js"></script>
• <link href="style.css">
• <a href="about.html"></a>
• CSS 文件中 background: url(avatar.jpg)（注意：这是 HTML 解析时计算的，不是 CSS 引擎自己 resolve）

❌ 完全不受影响的：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• fetch('./api/user')、import('./utils.js')
• CSS 中的 @import "reset.css"
• <iframe src="/admin/frame.html"></iframe>（根相对路径，直接拼域名）
• <img srcset="logo-2x.png 2x">（srcset 不走 base 规则）

多级目录部署时，base 和前端路由/构建工具容易冲突

SPA 部署在子路径（如 https://example.com/a/b/c/）时，<base href="/a/b/c/"> 和框架路由配置必须对齐，否则行为割裂：

• Vue Router / React Router v6+ 要显式传入 base: '/a/b/c/'，它们不读 document.baseURI
• Webpack 的 publicPath 和 HTML 中手写的 <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>，预缓存路径就错位

本地开发建议用 href="http://localhost:3000/" 而非 href="/"，避免和后端路由冲突；生产环境走 CDN 时，用完整绝对 URL 比根相对路径更可控。

base 标签必须放在 顶部且唯一

浏览器只认 内第一个 <base>，其余全被忽略。放到 里？直接失效，控制台可能连提示都没有。

容易踩坑的场景：

• 服务端模板拼接时，header 模板和页面模板各自 render 一个 <base> → 只有第一个生效
• Vue/React 组件内动态插入 <base> → DOM 已开始解析，后续资源不会重新 resolve
• 多个 <base> 共存 → 控制台提示 Multiple base elements detected. Only the first one is used.

最稳妥的做法：在 HTML 源码中静态写死一个，放在 最顶部，且确保构建流程或 SSR 不会重复注入。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！