CDN场景下base href必须用完整绝对URL（如https://cdn.example.com/v3/），否则浏览器静默忽略导致资源404；应仅通过构建工具配置publicPath/base，避免手动写base标签引发路径重复；SPA子路径部署需同时配置base href与路由base。
CDN 场景下 base href 必须用绝对 URL，不能省协议或域名
CDN 加速时，<base href> 的值必须是完整绝对 URL（如 https://cdn.example.com/v3/），否则浏览器静默忽略，所有 <img src="logo.png">、<script src="app.js"> 都会回退到当前页面 URL 解析，上线即 404。
常见翻车写法：<base href="cdn/">、<base href="/cdn/">、<base href="//cdn.example.com/">（缺版本路径）——这些看似“够用”，但要么非法被丢弃，要么导致资源加载路径错位。
-
<base href="https://cdn.example.com/v3/">✅ 安全、明确、可调试 -
<base href="//cdn.example.com/v3/">⚠️ 协议相对，HTTPS 页面下生效，HTTP 页面下可能降级失败 -
<base href="/v3/">❌ 根相对路径，指向当前域名，完全绕过 CDN
base 标签和构建工具 publicPath / base 配置不能共存
Vite 的 build.base、Webpack 的 publicPath 和 HTML 中手写的 <base href> 是三套独立机制。若同时启用且值相同，资源路径会被拼接两次，比如最终请求变成 https://cdn.example.com/v3//v3/js/app.js（注意双斜杠）。
推荐做法：CDN 场景下，**只靠构建工具配置，不手动写 <base>**。Vite 用户设 build.base: "https://cdn.example.com/v3/"，Webpack 用户设 output.publicPath: "https://cdn.example.com/v3/"，HTML 模板里删掉 <base> 标签。
立即学习“前端免费学习笔记（深入）”；
- 手动加
<base>是补丁行为，容易掩盖构建配置混乱 - Service Worker 缓存预加载路径依赖构建时生成的 URL，不是运行时
document.baseURI - DevTools Network 面板里看实际请求地址，比检查
<base>是否存在更可靠
CDN + SPA 子路径部署时，base href 和路由 base 必须各自显式配置
假设你把 Vue 应用部署在 https://cdn.example.com/v3/admin/，页面 URL 是 https://example.com/admin/，这时有两件事必须分别做，缺一不可：
- HTML 中
<base href="https://cdn.example.com/v3/admin/">→ 让<script src="js/chunk.js">正确加载 - Vue Router 创建时传
base: '/admin/'→ 让router.push('/home')跳到/admin/home，而非根路径
两者不互通：document.baseURI 不影响 Vue Router 行为，反之亦然。只配一个，必然出现资源 404 或路由跳转错乱。
target="_blank" 在 CDN 页面中要格外谨慎
CDN 域名（如 cdn.example.com）和主站域名（example.com）通常跨域。若你在 <base target="_blank"> 下打开链接，又没加 rel="noopener"，新窗口将能通过 window.opener 访问原页面上下文，存在安全风险；且部分浏览器会因跨域限制静默阻止 opener 访问，导致行为不可控。
更稳妥的做法是：去掉 <base> 的 target 属性，所有需要新窗口的链接显式写 <a href="..." target="_blank" rel="noopener">。
最容易被忽略的是第三方组件里的链接——它们默认继承 <base target>，但你无法控制其是否加 rel，所以干脆别设全局 target。
