HTML中base标签设置JavaScript资源路径的方法-html教程-PHP中文网

base标签会影响所有相对路径的加载，即会以base href为基准解析，如使脚本请求变为https://cdn.example.com/a.js；但fetch、import()等运行时api完全不受影响。

html中base标签设置javascript资源路径的方法

base 标签会影响所有相对路径的 `<script></script>` 加载

<base> 会全局修改页面中所有相对 URL 的解析基准，包括 <script src="a.js"></script>。一旦设置了 <base href="https://cdn.example.com/">，浏览器就会把 src="a.js" 解析成 https://cdn.example.com/a.js，而不是当前 HTML 所在目录下的 a.js。

常见错误现象：404 Not Found（脚本实际在本地 /js/a.js，但请求发到了 CDN 域名下）；或脚本加载成功但后续动态 import()、fetch()、图片路径全部错乱。

只在中设置一次 <base>，且必须在任何 <script></script> 标签之前
如果部分 JS 需从当前域加载（如入口 main.js），应改用绝对路径：src="/js/main.js" 或完整协议 URL
避免用 <base href="./"> —— 它不会回退到当前页面路径，而是按当前文档 URL 解析，行为不可靠

用 `document.currentScript` 动态推导脚本所在目录更可靠

当需要让 JS 自行定位同级资源（比如配套的 JSON 或 wasm 文件），不依赖 <base> 是更健壮的做法。核心是读取当前执行脚本的 src 属性，再用 URL API 截取目录：

const script = document.currentScript;
const baseUrl = script && script.src ? new URL(script.src).origin + new URL(script.src).pathname.replace(/[^/]+$/, '') : '/';

这样得到的 baseUrl 不受 <base> 干扰，且兼容本地文件（file://）和各种部署路径。

注意：该方法要求脚本是外链（src 存在），内联 <script></script> 中 document.currentScript 的 src 为 null
若需支持 IE，得降级用 script.src || script.getAttribute('src') + 字符串截取
不要在模块脚本（type="module"）中依赖 document.currentScript —— 它在模块中始终为 null

`<base>` 和 `type="module"` 共存时路径解析逻辑不同

ES 模块的 import 语句遵循 ES 规范，其相对路径解析**不受** <base> 影响，而是基于模块文件自身的 URL。但 <script type="module" src="foo.js"></script> 这个 src 属性本身仍受 <base> 控制。

html-ppt-to-pdf

将使用 `

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

下载

也就是说：<base href="https://cdn.com/"> → src="foo.js" 被加载自 https://cdn.com/foo.js；而该 foo.js 内部写 import './utils.js'，则仍从 https://cdn.com/utils.js 加载（因为模块自身 URL 是那个 CDN 地址）。

若模块实际部署在子路径（如 /app/foo.js），但 <base> 指向根域名，会导致模块内部 import 错误地跳转到根路径
解决办法：要么不用 <base>，要么确保模块及其所有依赖都部署在 <base href> 指定的同一前缀下
动态 import() 表达式也遵守模块解析规则，同样无视 <base>

真正要统一资源路径，优先用构建时处理而非 `<base>`

运行时靠 <base> 统一 JS 路径，本质是把路径决策后移，容易引发环境差异（开发时无 base，上线加了 base 就出问题）、调试困难、与现代打包工具（Vite、Webpack）的 public asset 管理冲突。

更推荐的做法是在构建阶段注入正确路径：

Vite 项目：用 base 配置项（vite.config.js 中 base: '/my-app/'），它会重写所有静态资源引用，并生成正确的 <base href="/my-app/">（仅当必要时）
Webpack：通过 output.publicPath 控制 chunk 加载路径，JS 内部的 __webpack_public_path__ 可动态调整
纯静态页：用构建脚本（如 esbuild --define）将 ASSET_BASE 替换为实际前缀，比 runtime 依赖 DOM 更可控

手动维护 <base> 很容易漏掉某处动态加载逻辑，尤其当项目引入第三方 SDK 或 Web Component 时，它们内部的资源路径往往隐式依赖当前上下文 —— 这类细节最容易在灰度发布时暴露。