HTML静态资源引入：采用路径别名配置统一资源引用的方法-html教程-PHP中文网

直接写../assets/js/app.js易出错因路径层级深时../易数错，且构建工具不解析html中字符串路径做别名替换；可统一根路径解析但不解决短路径问题；vite/webpack需插件支持html别名；thymeleaf中@{...}是后端运行时路径映射。

html静态资源引入：采用路径别名配置统一资源引用的方法

为什么直接写 `../assets/js/app.js` 在多层嵌套页面里容易出错

路径层级一深，../ 数量就容易数错；改个页面位置，所有 src 和 href 得全手动重算。更麻烦的是，构建工具（如 Vite、Webpack）根本不会解析 HTML 里的字符串路径做别名替换——它只处理 JS/TS 模块导入。所以你写 import "@/utils/helper" 能走别名，但 <script src="@/js/main.js"></script> 会 404。

`<base href="/>`%20%E4%B8%8D%E6%98%AF%E5%88%AB%E5%90%8D%EF%BC%8C%E4%BD%86%E5%AE%83%E8%83%BD%E7%BB%9F%E4%B8%80%E6%A0%B9%E8%B7%AF%E5%BE%84%E8%A7%A3%E6%9E%90

%0A

%E5%AE%83%E4%B8%8D%E8%A7%A3%E5%86%B3%E2%80%9C%E5%86%99%E7%9F%AD%E8%B7%AF%E5%BE%84%E2%80%9D%E7%9A%84%E9%97%AE%E9%A2%98%EF%BC%8C%E4%BD%86%E8%83%BD%E8%AE%A9%E4%BD%A0%E6%89%80%E6%9C%89%E7%9B%B8%E5%AF%B9%E8%B7%AF%E5%BE%84%E9%83%BD%E4%BB%A5%E6%8C%87%E5%AE%9A%E5%89%8D%E7%BC%80%E4%B8%BA%E5%9F%BA%E5%87%86%E3%80%82%E6%AF%94%E5%A6%82%E5%9C%A8%20<head>%20%E9%87%8C%E5%8A%A0%EF%BC%9A <base href="/myapp/">那么 <code><img src="logo.png"></code> 实际请求的是 <code>/myapp/logo.png</code>，<code><link href="css/style.css"></code> 请求的是 <code>/myapp/css/style.css</code>。注意三点： <ul> <li> <code><base></code> 只影响当前 HTML 文档内所有相对路径（<code>src</code>、<code>href</code>、<code>form action</code> 等），不影响 JS 里动态拼的路径</li> <li>必须放在 <code></code> 里，且只能有一个；多个或放错位置会被忽略</li> <li>部署到子路径（如 <code>https://example.com/admin/</code>）时，<code>href</code> 值要和实际部署路径严格一致，否则全部 404</li> </ul> <h3>Vite / Webpack 中用插件让 HTML 支持 <code>@/</code> 别名</h3> <p>原生 HTML 不支持模块别名，但可通过构建插件注入转换能力。Vite 用户可用 <code>vite-plugin-html</code> 或 <code>vite-plugin-html-config</code>，在构建时把 HTML 中的占位符替换成真实路径。例如：</p> <pre class="brush:php;toolbar:false;"><script src="@/js/main.js"></script>

→ 构建后变成：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

<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，不认你编辑器里写的 @/。