base href必须是绝对URL才能生效于CDN场景，仅https://、http://或//开头的值被识别，相对路径会被静默忽略导致404；且<base>须为<head>中首个元数据标签且唯一，位置或数量错误将使CDN路径失效；它仅影响HTML解析时的纯相对路径资源（如img/src），对JS动态请求（如fetch）无效；构建工具配置base比手写<base>更可靠，二者不可混用以防路径重复拼接。
base href 必须是绝对 URL 才能生效于 CDN 场景
浏览器对 <base> 的 href 值极其严格：只有以 https://、http:// 或 // 开头的值才被识别为有效基准；写成 assets/、/cdn/（缺结尾斜杠）、%PUBLIC_URL%/（未被构建工具替换）都会被静默忽略——页面照样渲染，但所有 <img src="logo.png"> 全部按当前页面 URL 解析，上线后必 404。
CDN 加速依赖资源能被正确寻址并缓存，所以推荐直接用完整绝对 URL：
-
<base href="https://cdn.example.com/v3/">—— 最稳妥，协议、域名、版本路径全固定 -
<base href="//cdn.example.com/v3/">—— 协议相对，自动继承当前页协议，适合混合 HTTP/HTTPS 环境 - 避免
/myapp/这类根相对路径用于 CDN 场景，它无法指向外部域名，只适用于同源子路径部署
base 标签位置和数量错误会导致 CDN 路径完全失效
<base> 必须是 <head> 中第一个元数据类标签，且全文档只能有一个。放错位置（比如在 <title> 后面），或重复声明（如 SSR 模板拼接出两个 <base>），浏览器会直接跳过或仅取第一个——你根本看不到报错，但所有资源请求都已脱离 CDN 域名。
常见翻车点：
立即学习“前端免费学习笔记（深入）”；
- Vue/Vite 项目中，在
index.html模板里把<base>写在<script>标签之后 - 使用 Hugo/Jekyll 时，条件判断逻辑导致
<base>被重复注入 - 本地开发用
http://localhost:3000/测试通过，上线却忘了替换成 CDN 地址
验证是否生效：打开控制台执行 document.baseURI，返回值必须与你写的 href 完全一致。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
哪些资源走 base，哪些根本不走——别指望它管 JS 动态请求
<base> 只在 HTML 解析阶段重写纯相对路径，影响范围非常明确：
- ✅ 生效：
<img src="logo.png">、<link href="style.css">、<script src="app.js">、CSS 中的background: url(icon.svg) - ❌ 完全不生效：
fetch('./api/user')、import('./utils.js')、new Worker('./worker.js')、CSS@import "reset.css" - ⚠️ 半生效：
document.baseURI可读取，可用于构造 URL（如new URL('data.json', document.baseURI)），但window.location和document.URL不变
这意味着：就算你 <base href="https://cdn.example.com/"> 设得再准，JS 里写的 fetch('./config.json') 仍会请求当前页面所在域下的 /config.json，不会自动跳去 CDN。
Vite/Webpack 构建时设 base 比手写 <base> 更可靠
手写 <base> 容易漏环境、错顺序、忘斜杠；而构建工具能在生成 HTML 时动态注入符合上下文的值，更可控。
Vite 用户只需在 vite.config.ts 中配置：
export default defineConfig({
base: process.env.NODE_ENV === 'production'
? 'https://cdn.example.com/v3/'
: '/'
})
Webpack 用户配合 HtmlWebpackPlugin 和 publicPath：
output.publicPath: 'https://cdn.example.com/v3/'- HTML 模板中写
<base href="{{ htmlWebpackPlugin.options.publicPath }}">
关键提醒：如果同时用构建工具设了 base（或 publicPath）又手动写 <base>，资源路径可能被拼两次，比如变成 https://cdn.example.com/v3//css/main.css，引发 404。选一种方式，保持统一。
