base href必须是绝对url或根相对路径（以/开头且结尾带斜杠），否则被浏览器静默忽略，导致所有纯相对路径按当前页url解析而批量404；必须置于最前且唯一，仅影响html解析阶段的src/href等属性，对js/css动态路径无效。
base href 必须写成绝对 URL 或根相对路径，否则模版一复用就全挂
多目录共享模版时，base 标签最容易翻车的地方，是把 href 写成普通相对路径（如 href="assets/" 或 href="../static"）。浏览器压根不认——整条 <base> 被静默丢弃，后续所有 <img src="logo.png"> 都退回到按当前页面 URL 解析。结果就是：首页能加载的图片，在 /admin/user 页面里全 404。
模版里不能出现这些写法：
-
href="static/"（缺协议、缺根斜杠） -
href="%PUBLIC_URL%/"（未被服务端替换，字面量发到浏览器） -
href="/myapp"（结尾没斜杠，Firefox 可能截断成/myappcss/）
✅ 正确写法只三种：
-
href="https://cdn.example.com/v3/"（推荐，部署可控） -
href="/myapp/"（合法，适用于子路径部署，结尾斜杠不可省） -
href="//cdn.example.com/v3/"（协议相对，适合 http/https 混合环境）
模版中 base 必须放在 head 最顶部，且只能有一个
共享模版常由多个组件或片段拼接生成（比如 header + page + footer），容易在不同位置各自插入 <base>。结果就是多个 <base> 并存——浏览器只认第一个，其余全被忽略，控制台会提示 Multiple base elements detected. Only the first one is used.，但你可能根本没打开控制台。
更隐蔽的问题是顺序错乱：如果模版片段里先写了 <link href="style.css">，后才注入 <base href="/myapp/">，那这个 CSS 已经按原页面 URL 解析完了，base 对它完全无效。
正确做法是：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 把
<base>固定放在模版的开头，早于<title></title>、<link>、<script></script> - 禁止任何子组件、JS 脚本或服务端条件逻辑动态追加
<base> - SSR 渲染时确保 header 片段只输出一次
<base>，别让 page 或 footer 也凑热闹
base 不影响 JS 动态请求和 CSS @import，模版里别指望它“一劳永逸”
很多团队以为加了 <base href="/myapp/">，就能统一管住所有路径——结果发现 fetch('./api/data.json') 还是 404，@import "reset.css" 加载失败，new Worker('./worker.js') 报错。这是因为 <base> 只在 HTML 解析阶段起作用，只改写属性值里的纯相对路径（如 src、href、action），对运行时行为完全无感。
模版中要特别注意这些“假统一”场景：
- CSS 里的
@import "theme.css"：不受base影响，必须用绝对路径或根相对路径（如@import "/myapp/css/theme.css"） - JS 中的
import('./utils.js')：路径解析走 ES Module 规则，和document.baseURI无关 - SPA 路由配置（如 Vue Router 的
base选项）：和 HTML 的<base>是两套独立机制，必须显式配一致，否则跳转和资源加载会打架
构建时自动注入比手写 base 更可靠
在多目录共享模版场景下，硬编码 <base href="/myapp/"> 很容易在开发、测试、预发、生产等环境间出错。比如本地用 http://localhost:3000/，上线却要切到 https://cdn.example.com/v3/，每次手动改模版既易漏又难维护。
更稳妥的做法是交给构建工具处理：
- Webpack：通过
output.publicPath配置，配合HtmlWebpackPlugin自动注入<base href="%7B%7B%20publicPath%20%7D%7D"> - Vite：设置
base: "/myapp/"，Vite 会在生成的 HTML 中自动写入合规的<base> - 服务端模板（如 Hugo、Nunjucks）：用变量占位（如
<base href="%7B%7B%20BASE_URL%20%7D%7D">），确保构建时被真实值替换，而不是把{{ BASE_URL }}字面量发给浏览器
构建注入的好处是：一次配置，多环境生效；能校验 publicPath 是否以 / 结尾或含协议；避免人工失误导致的静默 404。手写 <base> 应该是兜底手段，不是首选方案。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
