HTML中base标签在项目部署时的路径配置指南-html教程-PHP中文网

base href必须是绝对url或以/开头的根相对路径，否则浏览器静默忽略导致批量404；须置于最前且唯一，仅影响html中纯相对路径（如src、href），对js/css动态路径无效。

html中base标签在项目部署时的路径配置指南

base href 必须是绝对 URL 或以 / 开头的根相对路径

浏览器只认 href 值以 https://、http://、// 或 / 开头，其他写法（比如 static/、../assets/、%PUBLIC_URL%/）会被静默忽略——不报错、不警告，但所有 src="logo.png" 都退回到按当前页面 URL 解析，上线后批量 404。

常见翻车点：

href="/myapp" 缺尾斜杠 → Firefox/Opera 可能截断成 /myappcss/，导致 style.css 请求路径错乱
href="https://cdn.example.com/v3" 同样缺斜杠 → 实际请求可能变成 https://cdn.example.com/v3js/app.js
href="assets/" 或 href="${ASSET_BASE}" → 字面量发到浏览器，直接失效

✅ 推荐写法：<base href="https://cdn.example.com/v3/">（CDN 场景）、<base href="/myapp/">（子路径部署）、<base href="//cdn.example.com/v3/">（协议相对）

base 标签必须放在最顶部且只能有一个

<base> 的作用是重置 HTML 解析器对“后续所有相对 URL”的基准起点，这个动作只在解析阶段生效，且仅对它之后出现的标签起效。放错位置等于没写。

正确顺序示例：

  <base href="/myapp/"><title>My App</title><link rel="stylesheet" href="main.css"><script src="app.js"></script>

错误情况：

放在 <meta> 或 <title></title> 后面 → 已解析的 <link href="main.css"> 不受控
放进 → 浏览器直接忽略，无提示
服务端模板拼接时 header 和 page 各 render 一个 <base> → Chrome 控制台提示 Multiple base elements detected. Only the first one is used.，第二个被丢弃

SPA 部署时 base href 必须和前端路由、构建配置对齐

<base href="/subpath/"> 和 Vue Router 的 base: '/subpath/'、Webpack 的 publicPath 是三套独立机制，不自动同步。只设一个，另一个大概率出问题。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

典型连锁故障：

HTML 没配 <base href="/admin/"> → <script src="chunk.js"></script> 404，白屏
Vue Router 没设 base: '/admin/' → router.push('/home') 跳到 https://example.com/home，而非 /admin/home
微前端子应用同时设了 publicPath: '/admin/' 和 <base href="/admin/"> → 资源路径被拼两次，变成 /admin/admin/js/app.js

Service Worker 缓存若依赖 self.location.origin + '/subpath/'，而 HTML 没配 <base>，预缓存路径也会错位。

哪些资源真受影响，哪些完全不受影响

<base> 只在 HTML 解析阶段改写纯相对路径（即不以 /、: 或协议开头的字符串），不是运行时重写器。

✅ 明确受影响（HTML 属性中硬编码的相对路径）：

<img src="logo.png">
<script src="app.js"></script>
<link href="theme.css">
<form action="submit.php"></form>
CSS 中的 background: url(avatar.jpg)（注意：这是 HTML 解析时计算的）

❌ 完全不受影响（JS/CSS 运行时路径）：

fetch('./api/data.json')
import('./utils.js')
new Worker('./worker.js')
CSS 中的 @import "reset.css"
<iframe src="page.html"></iframe>（它的 src 相对于 iframe 当前 URL）

真正容易被忽略的是：CSS 的 url() 函数确实受 <base> 影响，但 @import 完全不受；document.baseURI 会返回 <base href> 的值，可用于构造 URL，但 window.location 和 document.URL 完全不变。