base标签不能简化图片服务器切换，它仅在html解析阶段重置相对url基准起点；href必须为合法绝对url（如https://cdn.example.com/v3/）或根相对路径（如/assets/），缺斜杠或格式错误会导致所有src="logo.png"静默404且无报错。
<base> 标签不能简化图片服务器切换，它只在 HTML 解析阶段重置相对 URL 的基准起点；设错值（比如缺斜杠、非绝对或根相对路径）会导致所有 src="logo.png" 静默 404，且浏览器不报错。
base href 必须是合法绝对 URL 或根相对路径才生效
浏览器只认两种格式：https://cdn.example.com/v3/（结尾必须带斜杠）、/assets/（以 / 开头且结尾带斜杠）。其他写法如 assets/、../static/、/myapp（缺末尾斜杠）、%PUBLIC_URL%/ 全部被静默丢弃——此时所有 <img src="x.png"> 都退回到按当前页面 URL 拼接，上线后批量挂掉。
- Firefox 对
/myapp这种缺斜杠写法会截断成/myappcss/，导致路径错乱 - 协议相对写法
//cdn.example.com/v3/可用，自动继承当前页 http/https - 本地调试用
file:///D:/dist/风险高，部分浏览器不支持
base 只影响 HTML 属性中的纯相对路径，和“图片服务器”无关
<base> 不是给图片加前缀，也不参与构建时资源分发逻辑。它只改写解析时遇到的纯相对路径：
- ✅ 真受影响：
<img src="logo.png">、<img srcset="icon-2x.png 2x">、<script src="app.js"></script> - ❌ 完全无效：
<img src="/static/logo.png">（根相对，直接拼域名）、background: url(logo.png)（CSS 内部路径，<base>不穿透）、fetch('./api')（JS 运行时路径） - ⚠️ 特别注意：
srcset中多个路径都受base影响，但混写绝对/根相对路径容易漏配，导致部分分辨率失效
为什么你感觉“切服务器”变简单了？其实是错觉
有人误以为设个 <base href="https://cdn.example.com/v3/"> 就能一键切 CDN，但实际风险远大于便利：
- 所有 CSS
url()里的相对路径也会被重写，可能把url(./fonts/woff2)错拼成https://cdn.example.com/v3/fonts/woff2，而该路径根本不存在 -
<base>必须放在最顶部，如果模板里<link rel="stylesheet">在它前面，CSS 已解析完毕，图片路径却按新基准拼，前后割裂 - Vue/React 中
:src="require('./x.png')"或new URL('./x.png', import.meta.url)完全绕过<base>，结果只有部分图片走 CDN，其余仍走源站
真正稳的图片服务器切换方式
放弃 <base>，用构建工具 + 显式路径更可控：
- 统一用根相对路径：
<img src="/assets/logo.png">，服务端配置/assets/路由反向代理到 CDN - Vite/Webpack 项目：把图片放
public/下，引用/logo.png；或放src/assets/，用import logo from './logo.png'让构建器自动哈希+注入完整路径 - SSR 场景下，确保模板引擎（如 Hugo、Nunjucks）把
{{ .Site.BaseURL }}这类占位符真实替换，而非字面量发到浏览器
最常被忽略的一点：就算你把 <base> 所有规则都写对了，只要有一处 JS 动态创建的 <img>（比如懒加载插件），它的 src 就完全不受控——这种混合路径管理，比不用 <base> 更难 debug。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
