必须置于最顶部且唯一，href须为绝对url或根相对路径（以/开头并结尾带/），仅影响html解析阶段的src、href等纯相对路径，对js动态请求无效。
模板中写<base>必须早于所有资源标签
模板编译时，<base>必须出现在最顶部，比<title></title>、<meta>、<link>都靠前。否则浏览器已开始解析后续的src或href属性，<base>就失效了。
常见错误是把<base>塞在<title></title>后面，或者被模板引擎的条件块包裹导致位置浮动。实操建议：
- 在模板文件开头紧贴
写，例如：<base href="/myapp/"> <title>...</title> - 避免用
v-if或{% if %}包裹<base>，防止渲染逻辑干扰顺序 - 构建后检查生成的 HTML 源码，确认
<base>确实是第一个子元素
服务端模板里不能留未解析的占位符
像 Hugo 的{{ .Site.BaseURL }}、Jekyll 的{{ site.baseurl }}、或 Webpack 的，必须在构建阶段被真实值替换。如果输出的是字面量字符串（如<base href="%7B%7B%20BASE_URL%20%7D%7D">），浏览器会静默忽略整条标签。
验证方法很简单：部署后打开控制台执行document.baseURI，返回值要是你预期的绝对 URL 或根相对路径。容易踩的坑：
- 环境变量没注入，比如
process.env.PUBLIC_PATH在 SSR 中未传入模板上下文 - 模板语法写错，比如漏掉
{%或%}，导致占位符原样输出 - 本地开发时用了 mock 值，但 CI/CD 流程中没同步更新生产配置
静态站点生成器中优先用根相对路径而非 CDN 绝对路径
若站点要部署在子路径（如https://a.com/blog/），<base href="/blog/">比<base href="https://cdn.example.com/blog/">更安全。前者适配任意域名，后者一旦换 CDN 或协议就全挂。
但要注意结尾斜杠——/blog和/blog/效果完全不同：/blog会被 Firefox/Opera 截断拼接，导致style.css请求变成/blogstyle.css。实操要点：
- 所有根相对路径必须以
/开头且以/结尾，如/admin/、/v2/ - 避免混用：不要让部分页面用
/、部分用https://，否则路由和资源加载逻辑会割裂 - GitHub Pages 等平台不支持根相对路径指向子目录，此时必须用完整绝对 URL
<base>不影响 JS 动态路径，别指望它管fetch()和import()
很多人误以为加了<base href="/api/">就能让fetch('users')自动发到/api/users，实际完全无效。<base>只作用于 HTML 解析阶段的静态属性，比如<img src="icon.png">或<link href="main.css">。
CSS 中的url()函数受控，但@import不受；JS 的import('./utils.js')、new Worker('./worker.js')、fetch('./data.json')全部绕过<base>。这意味着：
- 前端路由（如 Vue Router history 模式）仍需显式配置
base: '/myapp/' - API 请求路径得靠代码拼接，比如
fetch(new URL('users', document.baseURI)) - 构建工具（Vite/Webpack）的
publicPath和<base>是两套机制，不能互相替代
<base>的容错极低——写错格式（如缺协议、少斜杠、带查询参数）、放错位置、重复声明，都不会报错，只会静默失效。上线前务必用document.baseURI和 Network 面板双重验证。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
