base标签仅在html解析阶段生效，仅修正纯相对路径（如logo.png）的初始拼接，不影响js/css运行时行为；href必须以/或协议开头且结尾带/，否则静默失效导致404。
base 标签只在 HTML 解析阶段生效，不是运行时重写器
浏览器遇到 <base href="/app/"> 时，并不会给后续所有 JS 或 CSS 行为“打补丁”，它只是在解析 HTML 文档流的那一刻，对紧随其后的、硬编码在标签属性里的纯相对 URL 做一次拼接修正。拼完就丢，不驻留、不监听、不干预后续任何动态行为。
这意味着：<img src="logo.png"> 会被解析成 https://example.com/app/logo.png；但 document.createElement('img').src = 'logo.png' 仍按当前页面 URL（比如 https://example.com/app/sub/page.html）拼成 https://example.com/app/sub/logo.png —— 完全不受影响。
常见错误现象：
- 加了
<base href="/admin/">，但fetch('./api/data')仍请求/api/data（404），误以为 base 应该管 API 路径 - CSS 里写
background: url(avatar.jpg)加载失败，却没意识到 CSS 的相对路径是相对于 CSS 文件自身位置，而非 HTML 页面 -
@import "reset.css"报 404，因为@import是 CSS 规则，base 标签对其无感知
href 值必须以 / 或协议开头，且结尾带 / 才真正安全
浏览器对 <base> 的 href 值做严格前置校验：只接受以 http://、https://、// 或 / 开头的字符串；其他一律静默忽略——不报错、不警告、不 fallback，直接当这行不存在。
更隐蔽的是结尾斜杠问题：<base href="https://example.com/app"> 在 Firefox/Opera 中会把 style.css 拼成 https://example.com/appstyle.css（中间斜杠被吞掉），必须写成 <base href="https://example.com/app/"> 或 <base href="/app/">。
实操建议：
- 本地开发调试时，用
<base href="http://localhost:3000/">比/更可靠，避免和后端路由冲突 - CDN 或多环境部署场景，优先用完整绝对 URL，如
<base href="https://cdn.example.com/v2.5/"> - 绝对不要写
<base href="static/">、<base href="../assets">或<base href="%24%7BVUE_APP_BASE%7D">（未服务端替换时就是字面量）
target 属性会强制作用于 form、iframe 和所有未显式声明 target 的 a 标签
<base target="_blank"> 看似只是“让链接新窗口打开”，实际它是一条全局默认规则：所有未写 target 的 <a></a>、<form></form>、<iframe></iframe> 都继承该值。这不是可选行为，而是浏览器强制应用的解析结果。
容易踩的坑：
-
<form action="/login"></form>提交后跳转到新空白页，用户看不到响应，也回不到原表单页 - 第三方 UI 组件中一个没加
target的内部跳转链接，意外触发新窗口，打断流程 -
<base target="myframe">但页面没有<iframe name="myframe"></iframe>，行为退化为_self，但开发者可能误以为它“失效”而放弃排查
真实场景中，target 的副作用比 href 更难察觉，因为它不产生 404，只改变交互流向。
SPA 场景下 base 标签和框架路由、构建配置必须三者对齐
Vue Router 的 base: '/subpath/'、HTML 中的 <base href="/subpath/">、Webpack/Vite 的 build.base（或 publicPath）是三套独立机制，缺一不可，且不能重复叠加。
典型翻车链路：
- 只配了
<base href="/myapp/">，但 Vue Router 仍是默认base: '/'→router.push('/home')跳到/home（根路径），不是/myapp/home - 只改了 Vue Router
base，但 HTML 没写<base>→index.js加载失败（请求/index.js，实际在/myapp/index.js） - 微前端子应用同时设了 Webpack
publicPath: '/myapp/'和<base href="/myapp/">→ 资源路径变成/myapp/myapp/js/chunk.js，双倍前缀
真正麻烦的从来不是某一个配置写错，而是 DevTools Network 面板里看到的请求 URL 已经被 base 解析过，但 Service Worker 缓存 key 还是按原始路径生成，或者构建产物里 publicPath 和 base 不一致 —— 这些环节只要漏掉一个，资源加载就断在某个你看不见的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
