html 元素（如 `
在 React + Django 项目中，你通过浏览器访问 http://localhost/index，Django 返回 index.html。此时若 HTML 中包含：
浏览器会将该路径视为相对于当前页面 URL 的相对路径，即：
- 当前页面 URL：http://localhost/index
- 浏览器解析 src="asset/script.js" → 拼接为：http://localhost/index/asset/script.js
- 结果：404（因为静态资源实际位于 http://localhost/asset/script.js）
⚠️ 注意：这不是 React 或 Django 的 bug，而是浏览器遵循 URL 规范（RFC 3986） 的标准行为——相对 URL 解析始终以当前文档的完整 URL为基准。
✅ 正确做法：使用根相对路径（Root-relative URL）
在 src、href 等属性中，以 / 开头的路径表示从网站根目录开始解析：
立即学习“前端免费学习笔记（深入）”；
@@##@@
✅ 优势：无论用户访问的是 /、/index、/user/profile 还是 /admin/，资源始终从根路径加载，行为一致、可预测。
? 替代方案：使用
你也可以在
中声明⚠️ 注意事项：
-
会影响页面中所有相对 href 和 src（包括 、 
、
- 若页面含跳转链接（如 ），也受
影响，可能意外改变导航逻辑； - 不推荐在单页应用（SPA）中滥用
，尤其当路由由前端（如 React Router）接管时，易与 basename 配置冲突。
? Django 部署提示（补充实践建议）
确保 Django 正确服务静态资源：
- 开发环境：确认 settings.py 中已启用 STATIC_URL = '/asset/'，且 STATICFILES_DIRS 包含 asset/ 目录；
- 模板中避免硬编码路径，推荐使用 Django 模板标签（如 {% static 'script.js' %}），但注意：该标签仅在 Django 渲染模板时生效；若 index.html 是由 React 构建后直接由 Django serve 静态文件返回（未经 Django 模板引擎处理），则必须手动写 /asset/script.js。
✅ 总结
| 写法 | 示例 | 解析基准 | 推荐度 |
|---|---|---|---|
| 相对路径 | asset/script.js | 当前页面 URL（易出错） | ❌ 不推荐 |
| 根相对路径 | /asset/script.js | 网站根域名（http://localhost/） | ✅ 强烈推荐 |
|
|
|
|
⚠️ 谨慎使用，需全局验证 |
修正后，资源将稳定加载，彻底避免因路径拼接异常导致的 404 问题。
