base href写错会导致所有相对资源404且浏览器静默丢弃不报错；仅https://.../、//.../或/path/（结尾必须带斜杠）合法，其他如js/、../assets、%PUBLIC_PATH%均无效。
base href 写错会让 <script src="app.js"> 404 且不报错</script>
浏览器对 <base href> 的校验极严：只要值不是以 http://、https://、// 或 / 开头，整条标签就被静默丢弃。比如 <base href="js/">、<base href="../assets">、<base href="%PUBLIC_PATH%">（未被构建工具替换时就是字面量），全部无效。此时所有 <script src="app.js"></script> 仍按当前页面 URL 解析，极易批量 404。
真正生效的只有两种写法：<base href="https://cdn.example.com/v3/">（绝对 URL，推荐 CDN 场景），或 <base href="/myapp/">（根相对路径，结尾斜杠 不能少，否则 Firefox 会截断路径）。
base 标签和 JS 执行时机无关，但会影响资源路径解析基准
<base> 只在 HTML 解析阶段起作用，它不改变 JS 的执行顺序，也不影响 window.onload 或 DOMContentLoaded。但它会统一重写所有纯相对路径的解析起点——包括 <script src="main.js"></script>、<link href="style.css">、<img src="logo.png"> 等。
这意味着：
- 若当前页面是 https://example.com/a/b/c/index.html，<base href="/a/b/c/"> 生效，则 <script src="main.js"></script> 实际请求 https://example.com/a/b/c/main.js；
- 但若 <base href="js/"> 被静默忽略，则同样这行 script 会尝试请求 https://example.com/a/b/c/js/main.js（即当前页面同级目录下的 js/ 子目录）——路径错位，404。
动态创建的 script 元素完全绕过 base 标签
用 JS 动态插入的 <script></script> 不受 <base> 影响：document.createElement('script').src = 'utils.js' 始终按当前文档 URL 解析，不会套用 document.baseURI。
这是最容易混淆的点：开发者常以为加了 <base> 就“全局生效”，结果发现内联脚本里 import('./utils.js') 报错、fetch('./api') 请求错地址、甚至 new URL('./data.json', document.baseURI) 返回的却是 /myapp/data.json，而其他地方却没变。
关键区别在于：
✅ 受控：HTML 硬编码的 src/href 属性（纯相对路径）
❌ 不受控：fetch()、import()、XMLHttpRequest、动态创建元素、CSS 中的 @import 和 url()（现代浏览器行为不一致）
与构建工具 publicPath 或路由 base 配置重复导致双斜杠 404
Vite 的 build.base、Webpack 的 publicPath、Vue Router 的 base、React Router 的 basename，这些和 HTML 中手写的 <base href="/subapp/"> 是四套独立机制。混用且值相同时，资源路径会被拼两次。
例如预期加载 /subapp/js/app.js，实际发出请求的是：/subapp//subapp/js/app.js（中间两个斜杠），服务器返回 404。
常见翻车组合：
- Vite 已设 base: '/subapp/'，又手动在 index.html 里加 <base href="/subapp/">
- Webpack 构建后 HTML 中已有正确 src 路径，再额外加 <base> 标签
- Vue Router 配了 base: '/subapp/'，但 HTML 没配 <base> → chunk 加载 404；反之，只配 HTML <base> 不配路由 base → 页面白屏、跳转失效
最稳的做法：构建工具生成的 HTML 通常已注入正确路径，除非有明确 CDN 或子路径部署需求，否则别手动加 <base> 标签。真要用，就只用一套机制，并确保所有环节（HTML、路由、构建配置）值完全一致、结尾斜杠一个不落。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
