直接写../assets/js/app.js易出错因路径层级深时../易数错，且构建工具不解析HTML中字符串路径做别名替换；<base href>可统一根路径解析但不解决短路径问题；Vite/webpack需插件支持HTML别名；Thymeleaf中@{...}是后端运行时路径映射。
为什么直接写 ../assets/js/app.js 在多层嵌套页面里容易出错
路径层级一深，../ 数量就容易数错；改个页面位置，所有 src 和 href 得全手动重算。更麻烦的是，构建工具（如 Vite、Webpack）根本不会解析 HTML 里的字符串路径做别名替换——它只处理 JS/TS 模块导入。所以你写 import "@/utils/helper" 能走别名，但 <script src="@/js/main.js"> 会 404。
<base href="/> 不是别名，但它能统一根路径解析
它不解决“写短路径”的问题，但能让你所有相对路径都以指定前缀为基准。比如在 <head> 里加：
<base href="/myapp/">那么
<img src="logo.png"> 实际请求的是 /myapp/logo.png，<link href="css/style.css"> 请求的是 /myapp/css/style.css。注意三点：
-
<base>只影响当前 HTML 文档内所有相对路径（src、href、form action等），不影响 JS 里动态拼的路径 - 必须放在
<head>里，且只能有一个；多个或放错位置会被忽略 - 部署到子路径（如
https://example.com/admin/）时，href值要和实际部署路径严格一致，否则全部 404
Vite / Webpack 中用插件让 HTML 支持 @/ 别名
原生 HTML 不支持模块别名，但可通过构建插件注入转换能力。Vite 用户可用 vite-plugin-html 或 vite-plugin-html-config，在构建时把 HTML 中的占位符替换成真实路径。例如：
<script src="@/js/main.js"></script>
→ 构建后变成：
立即学习“前端免费学习笔记（深入）”；
<script src="/src/js/main.js"></script>
关键配置点：
- 插件需配合
resolve.alias使用，确保别名定义一致（如@: path.resolve(__dirname, 'src')） - 只对静态字符串生效，
src="{{ dynamicPath }}"这类模板语法不会被处理 - Vue SFC 或 React JSX 里用
import引入资源仍是首选，HTML 模板仅用于真正全局、非模块化的资源（如 polyfill、CDN 回退脚本）
Spring Boot + Thymeleaf 下别名本质是路径映射，不是字符串替换
Thymeleaf 本身不提供路径别名机制，但 Spring Boot 的静态资源映射规则（classpath:/static/、classpath:/public/ 等）相当于隐式“别名”。你写：
<link th:href="@{/css/style.css}" rel="stylesheet">这里的 @{...} 是 Thymeleaf 表达式，由 Spring 解析成完整上下文路径（如 /myapp/css/style.css），而非简单字符串替换。这意味着：
-
@{/xxx}总是相对于应用上下文根（context-path），不是文件系统路径 - 如果应用部署在根路径（
server.servlet.context-path=为空），@{/css/style.css}就输出/css/style.css - 别名效果依赖后端运行时，无法在纯 HTML 静态预览中生效；本地双击打开会直接报 404
真正跨环境稳定的方案，是放弃“别名幻想”，老老实实用相对路径 + <base> 控制基准，再靠构建流程校验路径有效性——毕竟浏览器只认 URL，不认你编辑器里写的 @/。
