HTML页面设置<base>标签后资源的路径问题

344 阅读1分钟

之前写的项目里面整合了thymeleaf,但是实际上里面的内容全是用vue+axios实现的,然而在路径标签上我当时嫌方便,直接用上了th:src="@{}" 众所周知,thymeleaf中@{}会将根目录设定为当前web application的context root,就是在Tomcat中部署时配置的那个context root.

现在我用SpringMVC中默认的InternalResourceResolver视图解析器代替了thymeleaf视图解析器,因此HTML页面无法被thymeleaf渲染, 所有th标签都会失效。 然而th的@{}表达式的确很方便,该如何替换呢?

于是我便想到了使用HTML的<base href="">标签,该标签放置在<head></head>标签中,会默认将此页面的href,src等属性的根目录设置为base中的href。

比如: 现在假设有一个部署在Tomcat服务器上的web application,它的context root被设置为:/myapp 那么我在<base href="">标签中这样设置

<base href="/myapp/">
<link href="page2.html">

则此时link指向的绝对路径是:http://localhost:8080/myapp/page2.html

因此,href="/"就是指当前服务器的主域,主域后的路径才是context root。

如果这样设置

<base href="/">
<link href="page2.html">

则此时link的路径为:http://localhost:8080/page2.html

但是,注意,不能这样设置:

<base href="/myapp">
<link href="/page2.html">

此时的link的路径仍然会为:http://localhost:8080/page2.html

这是因为web路径的标准是这样的:

不以'/'开始的相对路径,找资源,以当前资源的路径为基准

以'/'开始的相对路径,以服务器的路径为标准(http://localhost:8080)

所以根本在于这个路径是否以"/"开头。