href值必须以http://、https://、//或/开头且结尾带/才生效，否则整条标签被静默丢弃；仅影响html解析阶段的相对路径，且须位于最前、唯一存在。

检查<base>的href值是否合法且生效

浏览器对<base href>的校验是“全有或全无”：只要值不以http://、https://、//或/开头，整条标签就被静默丢弃——控制台无警告，Network 面板里请求路径看起来“正常”，但实际全按当前页面 URL 解析，导致批量 404。

常见非法写法包括：assets/、../static/、subapp/、%PUBLIC_URL%（未被构建替换时就是字面量）、/myapp（结尾缺斜杠）。

合法写法只有两类：

• /myapp/ ✅ 根相对路径（开头和结尾都必须是/）
• https://cdn.example.com/v3/ ✅ 绝对 URL（协议+域名+路径，结尾带/）

打开浏览器开发者工具 → Elements 标签页 → 检查最顶部是否存在<base>，并确认其href值符合上述任一格式。若值非法，它就等于没写。

确认<base>位置和数量是否正确

<base>只对它之后出现的相对 URL 生效，且必须在内、所有其他标签（包括<title></title>）之前；多个声明时仅第一个生效，其余被静默丢弃。

典型错误：

• <link href="main.css"> <base href="/app/"> → main.css已按原始页面 URL 解析完毕，<base>对它无效
• <base>写在里 → 浏览器直接忽略，不报错也不警告
• 动态插入：document.head.appendChild(baseEl) → 解析阶段早已结束，完全无效

用 Ctrl+U 查看 HTML 源码，确认<base>是否位于第一行，且全文仅出现一次。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

区分哪些资源受<base>影响、哪些完全不受控

<base href>仅对 HTML 解析阶段的相对路径生效，JS/CSS 运行时路径（如 fetch()、import、@import）完全不受其控制。

这意味着：

• <img src="logo.png">、<script src="app.js"></script>、<link href="style.css"> 会受 <base> 影响
• fetch('./api/data.json') 仍按当前页面 URL 解析，不会跳到 /myapp/api/data.json
• CSS 中的 @import 'theme.css' 或 background: url(../img/bg.jpg) 也完全无视 <base>

这个边界非常关键：很多“样式丢失”其实是 CSS 文件本身加载成功了，但里面写的 url() 路径因未被 <base> 修正而 404，最终表现为背景图、字体、图标失效。

前端路由与<base>配置必须显式对齐

<base href="/admin/"> 不会让 Vue Router 或 React Router v6+ 自动识别子路径。它们根本不读 document.baseURI，必须显式配置 base 参数，否则导航和资源加载行为割裂。

典型症状：

• HTML 中写了 <base href="/admin/">，但 Vue Router 没设 base: '/admin/' → router.push('/home') 跳到 https://example.com/home，而非 /admin/home
• <img src="logo.png"> 加载 /admin/logo.png，但点击链接却跳到根路径，行为不一致

对应配置必须严格对齐：

• Vue Router：createRouter({ base: '/admin/' })
• React Router v6+：<router basename="/admin"></router>
• Vite：base: '/admin/'（影响构建输出前缀，但不替代路由配置）

最容易被忽略的是：构建工具（如 Vite）的 base 配置只改资源路径前缀，它不会自动让前端路由“感知”该路径；两套配置各自独立，错一个就全乱。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！