base标签是相对路径失效时的唯一标准解法，必须置于head最前且仅一个，href须为绝对url或根相对路径（结尾带斜杠），影响img/src、link/href、a/href等html静态属性，但不影响import()、fetch等运行时api。
base 标签不是“可选优化”，而是相对路径失效时的**唯一标准解法**。它直接改写浏览器解析所有 src、href、form action 等相对 URL 的起点，不靠 JS、不靠构建工具补丁——只要写对位置和值，立刻生效。
必须把 base 放在
浏览器按 HTML 顺序解析，base 必须是 中第一个元数据类标签，否则它对后面已出现的 <link> 或 <img> 完全无效。
- ✅ 正确：
<base href="/app/"> <link href="style.css"> - ❌ 错误：
<meta charset="utf-8"> <base href="/app/"> <link href="style.css">（<meta>后再放base，style.css仍按原页面 URL 解析） - ❌ 错误：
<base href="/app/">（浏览器静默忽略） - ❌ 错误：同一页面写两个
<base>，第二个被丢弃，控制台可能报Multiple base elements detected. Only the first one is used.
href 值只能是绝对 URL 或根相对路径，结尾必须带斜杠
base 的 href 不是“随便填个路径”，填错就等于把所有相对链接都指向黑洞。
- ✅ 推荐用绝对 URL：
<base href="https://cdn.example.com/v2/">（明确、跨环境稳定） - ✅ 可用根相对路径：
<base href="/myapp/">（注意结尾/，缺了会变成/myapplogo.png） - ❌ 慎用协议相对：
<base href="//cdn.example.com/assets/">（HTTPS 页面里加载 HTTP 资源会失败） - ❌ 绝对不能用页面相对路径：
<base href="assets/">或<base href="../static/">（结果依赖当前 HTML 文件位置，SPA 刷新后完全不可控）
验证是否生效？打开控制台执行 document.baseURI，返回值必须和你写的 href 完全一致。
base 控制哪些路径，又不管哪些
它的作用域很清晰：只影响 HTML 解析阶段的静态属性，其他一律绕过。
- ✅ 受控：
<img src="icon.png">、<link href="main.css">、<a href="about.html"></a>、<form action="submit.php"></form>、CSS 中的background: url(logo.jpg) - ❌ 不受控：
import('./utils.js')、fetch('./api/data.json')、new Worker('worker.js')、CSS 里的@import "reset.css" - ⚠️ 特别注意：
<iframe src="page.html"></iframe>内部的相对链接**不受父页面base影响**，子文档需自己定义
SPA 部署到子目录时，base 和路由配置必须对齐
比如 Vue Router 或 React Router 设置了 basename: '/admin/'，但 HTML 里漏了 <base href="/admin/">，就会出现：路由跳转正常，但刷新页面 404 —— 因为服务器找不到 /admin/admin/index.html 这种路径。
- 构建时（Vite/Webpack）要确保
base值和打包输出的publicPath/assetPrefix一致 - 服务端 Nginx/Apache 需配合 fallback：所有非资源请求（如
/admin/user/123）都要回退到/admin/index.html - 本地开发用
file://协议时，<base href="/app/">仍有效，但<base href="./dist/">行为不可靠，别这么写
真正容易被忽略的点是：你改了 base href，却没同步检查 CSS 里的 url() 是否还指向正确位置——它们虽受控，但路径拼接逻辑容易和开发者直觉冲突。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
