1. 问题背景与现象
在基于 React 的单页应用（SPA）中，script 标签的相对路径有时会被浏览器解析为根路径请求，导致资源加载失败或请求指向意外的地址。这种现象在涉及客户端路由的应用中尤为常见，因为路由的切换并不会重新加载整个页面，而是通过历史记录 API 或哈希路由在同一文档内更新视图。关键问题在于相对路径的解析基准与应用的部署结构之间存在不一致。
当你在页面中直接使用相对路径的 script 标签时，例如 script src="static/js/main.js"，在用户访问的 URL 为某个深层路由（如 /dashboard 或 /user/profile）时，浏览器会以当前文档 URL 为基础进行相对解析，最终请求的很可能是 /dashboard/static/js/main.js 或 /user/profile/static/js/main.js，而不是根目录下的 /static/js/main.js。这一行为在服务端没有严格的静态资源映射时，会引发资源加载失败，进而影响应用的初始化与渲染。
为了避免这类问题，开发者通常需要理解相对路径解析的工作原理，并结合部署环境对脚本引入路径进行合理配置。本文将围绕原因分析与可行解决方案展开，帮助你在 React 应用中稳定地加载 script 资源。
2. 浏览器对相对路径的解析机制
浏览器在遇到相对 URL 时，会将其“相对于”当前文档的 URL 进行解析。如果当前文档 URL 是一个深路径，那么没有以斜杠开头的路径将会被解析到该路径之下，而不是根目录。换句话说，相对路径的解析引用了当前文档的所在目录，而非固定的根路径。
举例说明：若当前文档 URL 为 https://example.com/dashboard/，而脚本 src="static/js/app.js"，浏览器的请求将变成 https://example.com/dashboard/static/js/app.js。如果 URL 为 https://example.com/dashboard（注意没有尾部斜杠），解析结果可能进一步指向 https://example.com/static/js/app.js 或者其他与浏览器实现相关的路径，这就带来不可预期的资源加载结果。
在没有明确的基准线时，
<!-- 相对路径示例 -->
<script src="static/js/app.js"></script>
</code>
基础路径的影响也会改变解析结果。若页面设置了 <base href="..."></base>，所有相对 URL 的解析都会以该基准为准，进一步影响 script 的加载路径。
3. 在 React 应用中的具体场景分析
对于基于 React 的应用，常见的场景包括使用历史模式（History API）路由的 SPA、以及在生产环境中通过服务器进行静态资源的回源与兜底。这些场景容易让相对脚本路径暴露出问题点：页面刷新或直接访问深层路由时，脚本资源可能被请求到非预期的位置，从而触发 404 或返回内容为入口 HTML 的情况。
在开发阶段，很多开发服务器（如 webpack-dev-server、Vite 的开发服务器）会把路由请求回退到 index.html，让应用继续运行。但这种回退机制并不能自动修正脚本的相对路径问题，特别是在生产构建产物部署到子目录或不同域名时尤为明显。
此外，应用的构建工具也会影响资源的路径管理。Create React App、Vite、Next.js 等不同工具对公共路径（publicPath/base）有不同的默认处理方式，如果不与部署结构相匹配，脚本仍然可能以错误的路径被请求。
4. 可行解决方案清单
4.1 使用根相对路径加载脚本（root-relative 路径）
将 script 的路径改为以斜杠开头的形式，确保无论当前页面处于哪一个深路由，脚本都从站点根目录加载。这是最直接且常用的修复方式，但需要确认应用真正部署在站点根域或相应子路径下的统一配置。
<!-- 绝对路径示例，根路径加载 -->
<script src="/static/js/app.js"></script>
如果你的应用部署在一个子路径下，例如 https://example.com/myapp/，你应将路径改为相对该子路径的根相对路径，或通过下文的公共路径/基准配置进行统一管理。
4.2 配置页面基准路径（base）标签
base 标签用于指定文档中相对 URL 的基准 URL，一旦设置，所有相对路径的解析都会以该基准为准。这在多路由、分支部署或子应用场景中尤为有用，但也要谨慎使用，因为它会影响页面中所有相对资源的加载。
<!– 示例：设定基础路径为根目录 –>
<head><base href="/" /><script src="static/js/app.js"></script>
</head>
如果你将应用部署在子路径下，可以把 base href 设置为该子路径，例如 <base href="/myapp/">，随后所有相对资源均以该基准加载。不过，务必确保你对整个页面资源加载行为做了全面的测试，以免引入其他资源的错配。
4.3 构建工具中的公共路径配置（publicPath/base）
不同的构建工具对资源路径有不同的配置项，统一设置为根路径是解决相对路径问题的常见做法之一。下面给出常见工具的示例。
• Webpack（生产与静态资源输出）：
module.exports = {// ...output: {publicPath: '/', // 指向站点根目录},
};
// Vite 配置
import { defineConfig } from 'vite'
export default defineConfig({base: '/', // 所有资源的根路径前缀
})
对于基于 CRA 的项目，可以在构建时通过环境变量来控制公开路径，通常使用 PUBLIC_URL 或在 index.html 中使用 %PUBLIC_URL% 占位符来确保资源路径正确解析。
4.4 服务器端路由处理以支持 SPA 回退
若前端使用历史模式路由，当用户直接访问深路由或刷新页面时，服务器需要把该请求回退到前端入口文件（通常是 index.html）。如果服务器对静态资源和入口文件的路径处理不当，仍会造成资源请求的错位。因此，应明确区分静态资源与 SPA 入口的处理逻辑。
// 以 Express 为例的简单回退策略
const express = require('express')
const path = require('path')
const app = express()app.use('/static', express.static(path.join(__dirname, 'build/static')))
app.get('*', (req, res) => {res.sendFile(path.join(__dirname, 'build/index.html'))
})app.listen(3000)
确保静态资源目录与入口文件的静态提供保持一致，并且对非静态资源的路由请求进行合适的回退处理，这样就能避免因为脚本路径错误导致的页面加载中断。
4.5 调整路由基准以适配子路径部署（basename）
在 React Router 等客户端路由库中，使用 basename 可以为路由提供一个统一的前缀，使内部路由和链接在深度路径下正常工作；同时，服务器的资源加载也需要结合该基准进行配置。
<!-- App.jsx 或等效入口文件 -->
import { BrowserRouter } from 'react-router-dom'function App(){return (<BrowserRouter basename="/myapp">{/* 路由定义在此处 */ }</BrowserRouter>)
}
当你把应用部署在子路径 /myapp 下时，增设 basename 能使路由请求保持一致，同时与服务器端静态资源的处理逻辑协同，以避免相对脚本路径在深路由下被错误解析。请注意，这并不能直接修正 script 标签的相对路径问题，但它能协同部署路径的统一性，减少页面在深路径下的加载异常。
5. 追加的验证与测试要点
为确保解决方案有效，建议在多种场景下进行验证：不同深度的路由、浏览器类型、以及开发/生产环境的部署差异。尤其要关注以下要点：资源请求的实际 URL 是否与预期一致、静态资源能否正确加载、以及在刷新深路由时页面能否正常初始化。
你可以通过浏览器开发者工具的网络面板，逐条检查 script、CSS、图片等静态资源的请求路径以及返回状态码，确保没有因为相对路径而触发的 404 或重定向。
在团队协作中，建立一个简单的“路径测试用例”，覆盖不同部署场景（根域、子目录、不同子路径长度、以及跨域场景），有助于早期发现并修正相对路径带来的问题。
