base href必须为绝对url或以/结尾的根相对路径，否则浏览器静默忽略导致404；须置于最前且唯一，仅影响html中纯相对路径的src/href，对fetch/import等无效。
base href写成"/subpath"会导致CSS/JS 404
Firefox 和 Opera 会把 /subpath 当作 /subpathcss/app.css 拼接，因为规范要求根相对路径必须以 / 结尾。浏览器看到 href="/subpath" 就直接截掉末尾斜杠再拼，结果路径错位。
常见翻车点：<base href="/myapp">、<base href="/a/b/c"> 全部无效。必须写成 <base href="/myapp/"> 或 <base href="https://cdn.example.com/v2/">。
- 绝对 URL 更稳妥：CDN 场景下用
https://cdn.example.com/v2/，避免协议、域名、版本混搭问题 - 本地开发别用
/：容易和后端路由冲突，改用http://localhost:3000/ - 构建工具已设
base（如 Vite 的base: '/subpath/'），HTML 中就不要再手动加<base>标签
SPA 部署在子路径时，base 标签和前端路由配置必须对齐
Vue Router / React Router v6+ 的 base 配置项和 HTML 的 <base href="/subpath/"> 是两套独立机制，互不感知。只配一个，另一个大概率出问题。
典型症状：<base href="/admin/"> 写了，但 Vue Router 没设 base: '/admin/' → 点击 <a href="/home"></a> 跳到 https://example.com/home，而不是 https://example.com/admin/home。
-
<base href="/admin/">负责让<script src="js/app.js"></script>正确加载（变成/admin/js/app.js） - Vue Router 的
base控制所有router.push()和链接跳转的解析起点 - Service Worker 缓存策略若用
self.location.origin + '/admin/'，但 HTML 没配<base>，预缓存路径就会漏掉 chunk 文件
动态插入 base 标签完全无效
用 JS 执行 document.head.appendChild(baseEl) 后，已解析的 <img src="logo.png"> 不会重算路径，只影响后续新创建的元素（比如之后 document.createElement('img')）。
SSR 模板拼接时更危险：header 模板和页面模板各 render 一个 <base>，浏览器只认第一个，第二个被丢弃，控制台可能提示 Multiple base elements detected. Only the first one is used.。
-
<base>必须是的直接子元素，且出现在所有<link>、<script></script>之前 - 模板引擎（如 Hugo）中，确保
{{ .Site.BaseURL }}这类占位符被真实值替换，不是字面量字符串 - 禁止在
里写<base>—— 浏览器静默忽略，连 warning 都不抛
CSS 和 JS 的 import 完全绕过 base 标签
很多人误以为设了 <base href="/v3/"> 就能统一管住所有路径，其实 @import "reset.css"、import('./utils.js')、fetch('./api/user') 全都不受影响。
原因很直接：<base> 是 HTML 解析层规则，只改写 src、href 等属性中纯相对路径的初始解析逻辑；JS/CSS 运行时构造的路径，完全按模块自身位置或当前 origin 解析。
- CSS 中
@import "reset.css"→ 按该 CSS 文件所在路径解析，不是 HTML 页面路径 -
new URL('data.json', document.baseURI)可读取document.baseURI，但fetch('./data.json')仍走当前页面 URL -
<img srcset="logo-2x.png 2x">不走<base>规则，srcset是独立解析机制
真正容易被忽略的是：base 标签只在 HTML 解析那一刻起效，它不介入任何运行时行为。你看到资源 404，先查 Network 里请求地址是否真的拼错了，再确认是不是误用了相对路径、忘了结尾斜杠、或者 JS 动态加载根本没走 base 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
