日常工作中,我们可能会更改项目文件的目录结构,这样的话,就引发了一个问题,静态资源的路径如何处理?

一、问题由来

因为项目要根据浏览器语言版本切中英文网站,所以需要将静态资源放到各自语言版本目录中,所以我不得不更改目录结构。导致的问题就是,静态资源路径异常,图片,css以及js无法正常加载。

当然,这也不算什么大问题,全局搜索路径,整体替换就ok了。可是我并不想这么做,有没有一种更简洁的办法达到这个目的呢?

二、方案:nginx控制静态资源访问路径

首先,我想到了去 nginx 中配置静态资源的访问路径,对路径进行重新拼接或者重定向,如下:

1
rewrite /assets /zh/assets redirect;

这样理论上是可行的,但是却不是最好的解决方案。

譬如:我们需要中英文版本切换,此时,逻辑依赖真实的物理路径,而不是一个在访问时候重定向的路径。

三、方案:base标签

正在我一筹莫展的时候,同事给出建议:你试试base呗?我突然间意识到,这可能就是我要找的最优解决方案。

那么base究竟怎么用呢?w3school给出了这样一个🌰:

1
2
3
4
5
6
7
8
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
</head>
<body>
<img src="eg_smile.gif" />
</body>
</html>

请注意,我们已经为图像规定了一个相对地址。由于我们已经在 head 部分规定了一个基准 URL,浏览器将在如下地址寻找图片:

1
http://www.w3school.com.cn/i/eg_smile.gif

用法很简单,我们设置base标签,给一个基准href,那么其他的链接都是以此为基准,那么路径变更问题就迎刃而解了。

base还提供了另一个参数:

1
<base target="_blank" />

什么意思呢,请看下面的例子:

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" />
<a href="http://jartto.wang">Jartto's blog</a>
</body>
</html>

请注意,Jartto’s blog 链接会在新窗口中打开,即使链接中没有 target=’_blank’ 属性。

这是因为 base 元素的 target 属性已经被设置为 ‘_blank’ 了。

四、注意事项

一行代码就搞定了我大量重复替换的工作,真是不错!但是,别高兴的太早,这里有一点需要我们注意。

base适合于全路径或者相对路径,如果你写的绝对路径,那么base路径将会失效。


我们来看下面这个栗子:
1
2
<base href="/zh" />
<link rel='stylesheet' href='/assets/lib/swiper.min.css'>

如上所示,解析出来结果是:

1
href='http://jartto.wang/assets/lib/swiper.min.css'

而我想要的是:

1
href='http://jartto.wang/zh/assets/lib/swiper.min.css'

所以,这里是需要特别注意的。

当然,根据不同的项目需求,此类问题也会存在其他最优解。一个字总结:具体问题具体对待!

五、参考

html base标签:
http://www.w3school.com.cn/tags/tag_base.asp