网页基准URL设置有五种方法：一、用标签静态声明href；二、服务端模板动态注入；三、构建工具自动重写；四、前端路由显式配置base参数；五、JavaScript运行时用document.baseURI构造URL。
如果您在开发网页时发现页面中大量相对路径（如图片、样式表、脚本链接）因部署到子目录或 CDN 而失效，则很可能是基准 URL 解析错误所致。以下是设置网页基准 URL 的多种方法：
一、使用 标签静态声明 href 属性
该方法通过在 HTML 文档
中插入单个
标签，为所有后续相对 URL 提供统一解析起点，是标准且最直接的控制方式。
1、确保 标签位于
内最上方，且在任何
、<script> 或 <img> 标签之前；<p>2、设置 href 属性值为**绝对 URL**（如 <strong><span style="max-width:90%">https://cdn.example.com/assets/）或**根相对路径**（如 <strong><span style="color:green">/myapp/），结尾必须带斜杠；<p>3、验证浏览器是否生效：打开开发者工具控制台，执行 <strong><span style="color:green">document.baseURI，返回值应与所设 href 一致；<p>4、检查页面资源加载是否成功，若仍出现 404，需确认 href 值不含 <strong><span style="color:green">../、未遗漏协议、未缺失结尾斜杠。<h2>二、服务端模板注入动态 base 值<p>该方法适用于静态站点生成器（如 Hugo、Jekyll）或服务端渲染（SSR）场景，由后端或构建流程在 HTML 输出前将环境变量替换为真实路径，避免硬编码与部署耦合。<p>1、在 HTML 模板的 <head> 中写入占位语法，例如 Hugo 中：<strong><span style="color:green">{{ .Site.BaseURL }}；<p>2、确保构建时该变量被正确解析为完整绝对路径（如 <strong><span style="color:green">https://example.com/blog/）或合法根相对路径；<p>3、禁止输出未解析的字符串（如 <strong><span style="color:green">%7B%7B%20ASSET_BASE%20%7D%7D），否则浏览器将静默忽略 <base>；<p>4、部署后再次运行 <strong><span style="color:green">document.baseURI 验证值是否已更新。<h2>三、构建工具统一重写 HTML 中的 base href<p>该方法绕过手动维护 <base>，由 Webpack、Vite 等打包工具在生成最终 HTML 时自动注入符合当前部署上下文的 href 值，提升可靠性与可复现性。<p>1、在构建配置中启用 HTML 插件（如 webpack HtmlWebpackPlugin）并设置 templateParameters 或 inject: 'head'；<p>2、通过 publicPath 或 assetPrefix 配置项导出基准路径，并在 HTML 模板中映射至 <base href="{{ publicPath }}">；<p>3、确保 publicPath 值满足规范：以 <strong><span style="color:green">/ 开头表示根相对，或含完整协议和域名；<p>4、禁用 JavaScript 动态插入 <base>，因 DOM 操作无法修正浏览器已解析的 URL 基准。<h2>四、配合前端路由显式配置 base 参数<p>该方法不替代 <base> 标签，而是针对 SPA 场景下 HTML 资源加载与客户端路由分离的问题，通过框架自身机制协同处理路径逻辑，防止两者冲突导致跳转或加载异常。<p>1、Vue Router 中显式设置 <strong><span style="color:green">createRouter({ history: createWebHistory('/myapp/'), ... })；<p>2、React Router v6+ 中传入 <strong><span style="color:green"><BrowserRouter basename="/myapp/">；<p>3、确保该 basename 值与 HTML 中 <base href="/myapp/"> 的 href 值严格一致；<p>4、避免仅配置其中一项——若只设 <base> 而未配路由 base，router.push('/home') 将跳转至根路径；若只配路由 base 而无 <base>，则 chunk 加载地址仍为 404。<h2>五、使用 JavaScript 运行时构造 URL 替代依赖 base<p>该方法适用于无法控制 HTML 输出或需精细控制部分资源路径的场景，通过 document.baseURI 主动构造请求地址，规避 <base> 的静态局限性，尤其适合 fetch、Worker、动态 import 等不受 <base> 影响的操作。<p>1、在脚本中调用 <strong><span style="color:green">new URL('./data.json', document.baseURI) 获取完整请求路径；<p>2、对 CSS url() 或 img.src 等已受 <base> 控制的资源，无需额外处理；<p>3、对 fetch('./api/user')、import('./utils.js') 等动态行为，必须显式使用 document.baseURI 构造；<p>4、注意：若页面未声明 <base>，<strong><span style="color:green">document.baseURI 返回当前页面 URL，仍可安全用于构造。
</script>
