标签在file://协议下必须使用完整绝对路径（如file:///d:/myapp/dist/），否则资源404；相对路径、根路径或http路径均无效，且css中@import不受其影响。
<base> 标签在离线浏览场景下极易配置失效，根本原因是浏览器对 file:// 协议下 href 值的校验更严格，且多数写法会直接被静默忽略——你不会看到错误，但所有 src="logo.png" 都会 404。
file:// 协议下 base href 必须是完整绝对路径
浏览器只接受以 https://、http://、// 或 / 开头的 href 值。而 file:// 页面本身没有“协议相对”或“根相对”的概念，所以：
-
<base href="assets/">→ 无效（缺协议） -
<base href="/assets/">→ 无效（/指向系统根目录，非项目目录） -
<base href="https://example.com/assets/">→ 无效（离线时无法访问） - ✅ 正确写法：
<base href="file:///D:/myapp/dist/">（Windows）或<base href="file:///Users/you/myapp/dist/">（macOS）
注意路径必须以 file:// 开头、使用正斜杠、结尾带斜杠，且需是当前 HTML 文件所在磁盘的绝对路径。
离线时 CSS 中的 url() 仍受 base 影响，但 @import 不受影响
<base> 在 file:// 下依然作用于 HTML 解析阶段，所以：
-
<img src="icon.png">、<link href="style.css">、<script src="app.js"></script>都会拼接file://基准路径 - CSS 内的
background: url(logo.jpg)也会被重写（这是唯一穿透到 CSS 的情况） - 但
@import "reset.css"、fetch('./data.json')、import('./utils.js')完全不受影响，仍按当前 HTML 文件所在目录解析
这意味着：即使 <base> 配对了，CSS 里的 @import 仍可能 404，需手动改为绝对路径或改用 url()。
动态生成 base 的方案在离线环境不可靠
有人尝试用 JS 拼接路径再写入 <base>，比如：
<script>
const base = 'file://' + location.pathname.replace(/\/[^/]+$/, '/');
document.write('<base href="' + base + '">');
</script>
这种写法存在多个问题：
-
location.pathname在file://下返回的是本地路径（如/D:/myapp/index.html），但不同浏览器对反斜杠、空格、中文路径的处理不一致 -
document.write()会阻塞解析，且在现代浏览器中已不推荐，部分环境直接报错 - 一旦 HTML 已开始解析，后续插入的
<base>对之前已加载的资源无效
更稳妥的做法是：构建时用脚本生成正确路径的 <base>，或干脆避免离线使用 <base>，改用构建工具统一替换资源路径。
真正容易被忽略的一点是：离线场景下，<base href="/subpath/"> 这类写法看似简洁，实则完全失效——它会让所有相对路径指向系统根目录（如 file:///subpath/logo.png），而不是你的项目文件夹。必须显式写出完整的 file:// 绝对路径，且确保路径中不含空格或中文（否则部分浏览器拒绝加载）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
