base href值不合法时浏览器静默忽略，导致相对路径按当前页面url解析而批量404；合法写法仅三种：绝对url、根相对路径（结尾斜杠不可少）、协议相对url。
base href 值不合法时浏览器静默忽略，不是报错而是批量 404
浏览器对 <base> 的 href 值校验极严：只要不是以 https://、http://、// 或 / 开头，整个标签就被丢弃——控制台无警告，DevTools Elements 里还能看见它，但所有相对路径仍按当前页面 URL 解析，上线后大量 img、script、link 请求 404。
常见非法写法包括：
-
href="assets/"（纯相对路径，无协议无根） -
href="../static/"（含..，不被接受） -
href="cdn/v2"（缺协议也缺斜杠） -
href="https://example.com"（结尾没斜杠，Firefox/Opera 可能截断成https://example.comcss/）
合法且推荐的写法只有三种：
-
href="https://cdn.example.com/v3/"（绝对 URL，CDN 场景首选） -
href="/myapp/"（根相对路径，结尾斜杠不能少） -
href="//cdn.example.com/v3/"（协议相对，适配 http/https 混合环境）
base 标签必须放在 最前面，且只能有一个
<base> 影响的是 HTML 解析器对后续标签中相对 URL 的初始拼接逻辑，这个动作只在解析阶段发生一次，且仅对它之后出现的标签生效。放错位置等于没写。
典型错误场景：
-
<title>Page</title> <base href="/static/">——<title></title>不受影响，更关键的是，如果之前已有<link href="main.css">，那这条 CSS 已经按原始页面 URL 解析完了 - SSR 模板拼接或 Vue/React 组件内动态插入多个
<base>—— 只有第一个生效，其余被静默丢弃；控制台可能提示Multiple base elements detected. Only the first one is used. - 用 JS 动态插入：
document.head.appendChild(baseEl)—— 完全无效，解析阶段早已结束
正确写法必须是：
<base href="/myapp/"><title>My App</title><link rel="stylesheet" href="style.css"><script src="app.js"></script>
base 只改 HTML 属性中的相对 URL，不影响 JS/CSS 运行时路径
这是最容易误判的一点：加了 <base href="/cdn/">，不代表 fetch('./api')、import('./utils.js')、element.style.backgroundImage = "url(bg.jpg)" 全部自动带上前缀。它们完全不受影响。
<base> 仅作用于 HTML 解析阶段硬编码在标签上的相对路径，包括：
<img src="logo.png"><link href="main.css"><script src="app.js"></script><a href="about.html"></a><form action="submit.php"></form>
以下行为完全绕过 <base>：
- JS 中的
fetch('./data.json')、import('./module.js')、new Worker('./worker.js') - CSS 文件内的
@import 'reset.css'或background-image: url(logo.png)（按 CSS 文件自身位置解析） - JS 动态创建的元素：
const img = document.createElement('img'); img.src = 'icon.png';（按当前页面 URL 解析）
target 属性会全局覆盖 a/form/iframe 的默认打开方式
<base target="_blank"> 看似只影响链接，实际会强制所有未显式声明 target 的 <a></a>、<form></form>、<iframe></iframe> 都走新窗口/新 tab，连 JS 拦截后 window.location.href = '#' 都可能触发空白页。
风险点包括：
-
<form method="POST"></form>提交后跳转到新页，用户看不到响应，也无法返回原页面 -
target="myframe"但页面没有对应<iframe name="myframe"></iframe>，行为退化为_self，但调试时难定位 - SPA 中某些路由跳转依赖
history.pushState，却被<base target>干扰导致意外新开页
除非明确需要全局统一 target，否则建议避免使用该属性，优先在单个标签上显式声明。
真正难处理的不是怎么写 <base>，而是它只管 HTML 静态解析这一层，而现代前端大量路径来自 JS 动态加载、CSS 内联资源、构建时注入等环节——这些地方你得单独处理，<base> 帮不上忙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
