base href必须是绝对URL或根相对路径（以/开头且结尾带/），否则浏览器静默忽略；须置于最顶部且唯一；仅影响HTML解析阶段的src、href等纯相对路径及CSS url()，不影响fetch、import等运行时路径。
base href 必须是绝对 URL 或根相对路径，否则浏览器静默忽略
浏览器解析 href 值不以 http://、https://、// 或 / 开头，整个标签就被丢弃——控制台无报错，但所有 src="logo.png" 都按当前页面 URL 解析，上线后必 404。
常见无效写法：
-
href="assets/"（缺协议且非根路径） -
href="../static"（含..，违反根相对路径规则） -
href="/myapp"（结尾没斜杠，Firefox 会截断成/myappcss/）
✅ 推荐写法：
-
href="https://cdn.example.com/v3/"（绝对 URL，部署可控） -
href="/myapp/"（根相对路径，结尾必须带斜杠） -
href="//cdn.example.com/v3/"（协议相对，自动继承当前协议）
base 标签必须放在 最顶部，且只能有一个
中第一个元数据类标签。放错位置或重复声明，直接失效或静默降级。
典型翻车场景：
-
- SSR 模板拼接时 header 和 page 各 render 一个
Multiple base elements detected. Only the first one is used.）
正确顺序示例：
<base href="/myapp/"><title></title><link href="style.css"> @@##@@
base 只影响 HTML 静态属性，不影响 JS 动态请求和 CSS @import
、<script src></script>、、，以及 CSS 中的 url() 函数（如 background: url('icon.svg')）。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
完全不受影响的场景：
-
fetch('./api/data.json')—— 仍以当前页面 URL 为基准 -
import('./module.js')—— 不走 - CSS
@import 'theme.css'—— 是 CSS 解析行为，不依赖 HTML 基准
注意：url() 被重写是容易被忽略的关键点，比如你写了 background: url('i/bg.jpg')，而 https://cdn.example.com/i/bg.jpg，不是当前域名下的路径。
SPA 和构建工具中 base 的双重重写风险
Vue Router（history 模式）、React Router 等 SPA 在子路径部署时，常配 build.base、Webpack 的 publicPath）产生叠加效应。
后果包括：
- 静态资源被错误拼接前缀，例如本该加载
/assets/index.js，却发出/subpath/assets/index.js请求 - history.pushState 跳转后刷新页面 404（服务端未配置 fallback）
- DevTools Network 面板里看到的请求 URL 已被
建议策略：
- 构建时统一用工具配置（如 Vite
build.base），不再手动写 - 若必须手写
- 上线前务必检查 Network 面板中所有
src、href、url()类请求的实际地址
最易被忽略的其实是 CSS 里的 url() —— 它默默受
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
