标签在cdn迁移中是高风险操作，仅影响html解析时的纯相对路径（如），对js/css运行时加载（如fetch()、import）完全无效，设错即导致静默404。
<base> 标签在静态资源迁移到 CDN 时，不是“妙用”，而是**高风险操作**——它只改 HTML 解析阶段的 src、href 等属性里的纯相对路径，对 JS/CSS 运行时加载完全无效；设错一个字符（比如少斜杠、多点号），所有图片和脚本静默 404，浏览器连警告都不给。
为什么<base href="https://cdn.example.com/">常导致资源加载失败
表面上看，加了这行就能让 <img src="logo.png"> 自动指向 https://cdn.example.com/logo.png，但实际踩坑点极多：
- href 值必须以
https://、http://、//或/开头，写成static/、../assets、%PUBLIC_URL%全部被浏览器静默忽略 -
https://cdn.example.com（结尾没斜杠）在 Firefox 中会截断拼接，css/app.css变成https://cdn.example.comcss/app.css - 如果 HTML 页面本身在
https://example.com/blog/post.html，而<base href="https://cdn.example.com/">又放在中间，那么<a href="about.html"></a>也会跳去 CDN 域名下——这不是你想要的外链行为 - 构建工具（如 Vite 的
build.base）和<base>是两套机制，混用可能造成路径重复拼接，比如/cdn//cdn/js/app.js
<base> 能管住哪些资源，哪些根本不管
它的作用边界非常窄，只在 HTML 解析时生效，且仅限特定属性中的纯相对路径（即不以 /、:、协议开头）：
- ✅ 真正受影响：
<img src="icon.svg">、<script src="bundle.js"></script>、<link href="theme.css">、CSS 中的background: url(avatar.jpg) - ❌ 完全不受影响：
fetch('./api/data.json')、import('./utils.js')、new Worker('./worker.js')、CSS 中的@import "reset.css"、<iframe src="page.html"></iframe> - ⚠️ 半受影响：
document.baseURI会返回<base href>的值，可用于new URL('data.json', document.baseURI)，但window.location和document.URL完全不变
CDN 迁移时更稳妥的替代方案
比起硬塞 <base>，现代构建流程优先用工具链统一注入前缀：
- Vite 中直接配
build.base = 'https://cdn.example.com/'，它会重写所有<script></script>、<link>和import的静态路径（包括import logo from './logo.png'） - Webpack 配
output.publicPath = 'https://cdn.example.com/'+HtmlWebpackPlugin，确保模板中占位符被替换 - 手写的
<img src="logo.png">若必须保留，应改用import或new URL('logo.png', import.meta.url)，否则构建工具无法识别和重写 - 若仍要用
<base>，务必确保它出现在最顶部、唯一、href 以斜杠结尾，并且只用于子路径部署（如/myapp/），而非跨域 CDN 场景
真正容易被忽略的是：CDN 迁移后，<base> 对 JS 动态请求毫无作用，而线上问题往往就出在 fetch('./config.json') 这类调用上——它仍然走原始域名，和你设的 <base> 毫无关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
