<base href>合法值仅两种：根相对路径（如/myapp/）或绝对URL（如https://cdn.example.com/v3/），且必须位于<head>最顶部、唯一存在；它仅影响HTML解析阶段的纯相对URL，对JS/CSS动态路径、带协议或/开头的路径无效；SPA部署子路径时，需同步配置构建工具publicPath/base与前端路由base，三者值须一致且不重复启用。
检查<base href>值是否以/或协议开头且结尾带/
浏览器对<base>的校验是“全有或全无”：只要href值不以http://、https://、//或/开头，整条标签就被静默丢弃——控制台不报错，Network 面板里请求路径看起来“正常”，但实际全部按当前页面 URL 解析，批量 404 就这么来的。
常见非法写法包括：
-
assets/→ 缺少协议或根斜杠，直接失效 -
../static/→ 含..，规范禁止，丢弃 -
/myapp→ 结尾缺/，Firefox/Opera 会拼错成/myappjs/app.js -
%PUBLIC_URL%（未被构建替换）→ 字面量字符串，无效
合法写法只有两种：/myapp/（根相对路径，开头结尾都必须是/），或https://cdn.example.com/v3/（绝对 URL，结尾必须带/）。
确认<base>在<head>中位置正确且唯一
<base>只对它之后出现的相对 URL 生效，且必须位于<head>最顶部、所有其他标签（包括<title>）之前；多个声明时仅第一个生效，其余被静默丢弃。
立即学习“前端免费学习笔记（深入）”；
典型错误场景：
-
<head><link href="main.css"><base href="/app/"></head>→main.css已按原始页面 URL 解析完毕，<base>对它无效 -
<base>写在<body>里 → 浏览器直接忽略，不报错也不警告 - 用 JS 动态插入：
document.head.appendChild(baseEl)→ HTML 解析阶段早已结束，完全无效
用 Ctrl+U 查看 HTML 源码，确认<base>是否位于<head>第一行，且全文仅出现一次。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
验证是否真受<base>影响，别被假象骗了
<base>只在 HTML 解析阶段起作用，只改写纯相对路径（既无协议、也无/开头）的硬编码属性。它不是运行时重写器，更不干预 JS 或 CSS 的模块系统。
真正受控的写法示例：
<img src="logo.png"><script src="app.js"><link href="style.css">- CSS 中的
background: url(avatar.jpg)（注意：这是 HTML 解析时计算的）
完全不受控的写法（改<base>毫无意义）：
fetch('./api/user')import('./utils.js')new Worker('./worker.js')@import "reset.css"-
<iframe src="/admin/frame.html">（带/开头，已是绝对路径）
别指望<base>能修复这些——它们压根不走这个逻辑。
SPA 部署子路径时，<base>和前端路由必须显式对齐
<base href="/subpath/">不会让 Vue Router 或 React Router v6+ 自动识别子路径；它们完全不读document.baseURI，必须手动传入base配置项。
典型错配后果：
- 没配
<base href="/subpath/">→ chunk 加载 404（资源路径错） - 只配
<base href="/subpath/">，没设路由base→router.push('/home')跳到根路径，白屏 -
<base href="/subpath/">和 WebpackpublicPath: '/subpath/'同时配置 → 资源路径被拼两次，变成/subpath//subpath/js/app.js
Vite 已设base: '/subpath/'，HTML 中再手动加<base> → 重复生效，风险叠加。复杂点在于：三者（HTML base、构建配置、前端路由）必须值一致、且仅启用其一，否则行为割裂。
