HTML中base标签在模版开发中的应用-html教程-PHP中文网

是部署阶段刚性需求，决定子路径下资源能否正确加载；错误配置会导致 script/link/img 全量 404，且无提示；常见问题包括 baseurl 缺失尾部斜杠、环境不一致、与构建工具重复注入、css @import 不受其影响等。

html中base标签在模版开发中的应用

<base> 标签在模板开发中不是“锦上添花”，而是部署阶段的刚性需求——它直接决定生成的 HTML 能否在子路径下正确加载资源，否则 script、link、img 全部 404，且毫无提示。

模板里写 `<base href="%7B%7B%20.Site.BaseURL%20%7D%7D">` 是最常见也最容易翻车的写法

很多静态站点生成器（Hugo、Jekyll、VuePress）模板会用变量注入 <base>，比如 <base href="%7B%7B%20.Site.BaseURL%20%7D%7D">。但问题在于：.Site.BaseURL 的值是否满足浏览器硬性要求？

如果输出的是 https://example.com/blog（结尾没 /），Firefox/Opera 会截断拼接，css/app.css 变成 https://example.com/blogcss/app.css
如果输出的是 blog/ 或 ../assets，整个 <base> 被静默忽略，所有相对路径退回到当前页面 URL 解析 → 高概率全量 404
本地预览时 .Site.BaseURL 常设为 /，但生产环境部署到 /v2/，模板没做环境区分，<base href="/"> 导致资源从根目录加载，子路径下失效

构建工具 + 模板双写 `<base>` 会导致路径被拼两次

Webpack 的 publicPath: '/subapp/' 和模板里手动写的 <base href="/subapp/"> 不是互补，而是叠加。浏览器先按 <base> 把 index.js 解析为 /subapp/index.js，再被 Webpack 的 runtime 二次处理，最终请求 /subapp/subapp/index.js。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

Vite 用户尤其注意：build.base: '/subapp/' 已自动注入 <base> 到 HTML，模板里再写一条等于重复
Vue CLI 项目若开启 publicPath，又在 public/index.html 手动加 <base>，同样触发双重解析
微前端子应用若同时配置了 qiankun 的 entry 和模板里的 <base>，资源路径可能变成 /micro/subapp/subapp/js/chunk-xxx.js

CSS 中的 `url()` 受 `<base>` 影响，但 `@import` 不受影响

这是模板开发者最容易忽略的边界：你在 SCSS 模板里写 background: url("icon.png")，它会被 <base> 重写；但同一份 CSS 里写 @import "reset.css"，这条语句完全无视 <base>，仍按 CSS 文件自身位置解析。

后果：CSS 文件放在 /css/main.css，@import "reset.css" 会请求 /css/reset.css；但如果你靠 <base href="/cdn/"> 把 main.css 加载到了 https://cdn.example.com/css/main.css，@import 还是去 https://cdn.example.com/css/reset.css —— 如果 CDN 上没同步放 reset.css，就 404
解决思路：模板中不要依赖 @import 加载跨路径 CSS；或改用构建时内联（如 PostCSS 插件）、或把 @import 改成 <link rel="stylesheet"> 让它走 <base>

真正麻烦的从来不是怎么写 <base>，而是它只管 HTML 硬编码路径，对 JS 动态行为（fetch、import()、new Worker()）和 CSS @import 完全无感 —— 模板里一个变量漏判、一行 @import 没迁移、一次构建配置多写，都可能导致线上资源加载失败，且 Network 面板里显示的请求地址已经“看起来很合理”。