base href仅作用于纯相对路径（如logo.png），对绝对路径、协议相对路径及根路径无效；其值必须为绝对url或根相对路径且结尾带/；须置于head最顶部且唯一；spa需手动对齐base与路由配置。
base href 对绝对路径完全无效，只改纯相对路径
浏览器根本不会用 <base href> 去“修正”或“重写”已经带协议、// 或以 / 开头的 URL。它只接管形如 logo.png、js/app.js、css/style.css 这类**纯相对路径**（即不以 http://、https://、//、/ 开头的字符串）。
常见误判场景：
-
<img src="https://cdn.com/logo.png?x-oss-process=image/resize,p_40">→ 绝对 URL，<base>完全不碰 -
<script src="//unpkg.com/react@18"></script>→ 协议相对 URL，绕过<base> -
<link href="/css/main.css">→ 根相对路径，直接按当前 origin 拼，<base>不参与 -
<img src="logo.png">→ 纯相对路径，才真正被<base href="/app/">改成https://example.com/app/logo.png
href 值必须是绝对 URL 或根相对路径，否则静默丢弃
浏览器校验 <base href> 极其严格：只要值不以 http://、https://、// 或 / 开头，整条标签就被丢弃——控制台零提示，页面照常渲染，但所有后续纯相对路径仍按当前页面 URL 解析，上线后批量 404。
典型错误写法（全部无效）：
-
<base href="assets/">→ 缺协议和根斜杠，被忽略 -
<base href="../static/">→ 含..，规范禁止 -
<base href="https://example.com">→ 结尾无/，Firefox 可能截断为https://example.comcss/ -
<base href="%PUBLIC_URL%/">→ 字面量未替换，浏览器当普通字符串处理
正确写法仅两类：
-
<base href="https://cdn.example.com/v3/">（推荐，部署稳定） -
<base href="/myapp/">（合法，结尾斜杠不可省）
base 必须放在 最顶部且唯一，DOM 插入无效
<base> 的作用时机是 HTML 解析自上而下的过程，它只影响其后出现的纯相对路径。顺序错、位置错、数量多，等于没写。
实操红线：
- 放在
里 → 浏览器直接忽略，无警告 - 写在
<link rel="stylesheet">或<script></script>之后 → 这些标签的href/src已按原基准解析完毕，不受影响 - 服务端模板拼接出两个
<base>→ 只有第一个生效，控制台可能提示Multiple base elements detected. Only the first one is used. - 用 JavaScript 动态插入
<base>→ DOM 操作无法回溯修改已解析的路径基准
SPA 部署时 base 和路由/构建配置必须手动对齐
<base href="/myapp/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们完全不读 document.baseURI，必须显式传入 base 配置。
不匹配的后果是行为割裂：
- HTML 中
<script src="app.js"></script>走/myapp/app.js（base 生效） - Router 的
router.push('/home')却跳到/home（base 无效），导致 404 或白屏 - Webpack 的
publicPath: "/myapp/"+ HTML 中<base href="/myapp/">→ 资源请求变成/myapp//myapp/js/app.js（双斜杠 404）
更稳妥的做法是二选一：
- 只用构建工具控制前缀（如 Vite 的
build.base = "/myapp/"），HTML 中不写<base> - 只用
<base>控制静态资源，构建工具设publicPath: ""（空字符串），避免叠加
最易被忽略的一点：CSS 文件内的 background: url(avatar.jpg) 是受 <base> 影响的（HTML 解析阶段计算），但 @import "reset.css" 和 JS 中的 fetch('./api') 完全不受控——它们各自有独立的路径解析规则，不能指望一个 <base> 全局统一。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
