base href不能自动将所有静态资源指向CDN，仅对HTML中纯相对路径（如logo.png）生效；根相对（/static/）、绝对URL及JS/CSS运行时路径（import、fetch等）完全不受影响，CDN场景推荐构建工具统一注入前缀。
base href 能不能把静态资源自动指向 CDN
不能。它只改 HTML 解析阶段的相对路径，不改协议、不改域名、不介入构建逻辑。写 <base href="https://cdn.example.com/"> 后，<img src="logo.png"> 会变成 https://cdn.example.com/logo.png，但 <img src="/static/logo.png">（根相对）或 <img src="https://my.site/logo.png">（绝对）完全不受影响。
常见错误现象：本地开发用 <base href="/assets/">，上线后换成 <base href="https://cdn.example.com/">，结果部分图片仍从源站加载——因为那些 src 是绝对 URL 或带 / 开头，压根没走 <base>。
-
<base>只对纯相对路径生效（即不以/、:、//开头） - 它不重写 CSS 中的
@import、JS 中的import()、fetch()或new URL() - CDN 场景下，更推荐用构建工具统一注入前缀（如 Vite 的
build.base），而非依赖<base>
为什么 CDN 地址要写成绝对 URL 形式
因为浏览器只接受 href 值以 https://、http://、// 或 / 开头，其他写法（如 cdn/assets/、../static/）会被静默忽略，后续所有相对路径退回到按当前页面 URL 解析，上线后批量 404。
正确写法只有这三种：
立即学习“前端免费学习笔记（深入）”；
-
<base href="https://cdn.example.com/v3/">（推荐，协议+域名+路径明确） -
<base href="//cdn.example.com/v3/">（协议相对，适配 http/https 混合环境） -
<base href="/myapp/">（根相对，仅限同域子路径部署，结尾斜杠不能少）
错误示例：<base href="assets/">、<base href="%PUBLIC_URL%">、<base href="${CDN_BASE}">——这些都会被浏览器丢弃，不报错也不警告。
Vite / Webpack 构建时 base 配置和 <base> 标签要不要共存
不要共存。Vite 设了 build.base = "https://cdn.example.com/"，打包时会自动重写所有静态导入路径（import logo from "./logo.png" → CDN 地址）和 <script>/<link> 的 src/href；此时再手动加 <base>，会导致双重拼接风险（比如 https://cdn.example.com//cdn.example.com/main.js）。
构建工具接管路径时，<base> 应该完全移除：
- Vite 用户：删掉 HTML 中的
<base>，靠build.base+import.meta.env.BASE_URL控制 - Webpack 用户：确保
HtmlWebpackPlugin和output.publicPath一致，不额外加<base> - 纯静态 HTML（无构建）：才需要用
<base href="https://cdn.example.com/">统一兜底
CSS 里的 url() 为什么也受 base 影响而 @import 不受影响
因为 url() 是在 HTML 解析阶段被计算的——浏览器拿到 <style>background: url(avatar.jpg)</style> 或外部 CSS 文件中内联的 url(avatar.jpg)，会先结合当前 HTML 的 document.baseURI 拼出完整地址，再发起请求；而 @import "reset.css" 是 CSS 引擎自己解析的，基准是 CSS 文件所在位置，跟 HTML 的 <base> 无关。
这意味着：
-
<base href="https://cdn.example.com/">+background: url(logo.png)→ 请求https://cdn.example.com/logo.png -
<base href="https://cdn.example.com/">+@import "theme.css"→ 仍按 theme.css 所在路径加载（比如/css/theme.css下的@import会找/css/reset.css） - 所以 CDN 场景下，CSS 内部的图片路径最好也走构建工具处理（如 Vite 的
url()自动转为import），别依赖<base>偷懒
<base>，JS 里的 import('./utils.js')、fetch('./api/data.json')、new Worker('./worker.js') 全部绕过它——这些必须靠模块路径、构建插件或运行时逻辑来对齐 CDN。指望一个 <base> 标签统管所有资源，是线上 404 最常见的根源。 
