前端路径问题总结

发表于 分类于

path
本文总结一下前端页面关于路径的常见问题

3种路径写法

首先页面里的URL，和硬盘的路径有对应关系，主要是文件服务器在解析URL的时候，会跟硬盘上的目录结构对应起来找实体文件。但是URL和硬盘路径不完全一样。比如本地路径，如果是/，那么会从硬盘的根目录开始找；而URL的/，只会到虚拟主机的根目录，不会到真的根目录

常见的路径写法有3种：相对路径，绝对路径，全路径。以

1
www.abc.com/svc/1.html

为例

跳转到./2.html，或者2.html是一个意思，结果都是

1
www.abc.com/svc/2.html

跳转到/2.html，结果是

1
www.abc.com/2.html

跳转到

1
http://www.def.com/2.html

结果是

1
www.def.com/2.html

引用资源尽量使用相对路径

在html页面里引用资源如css，javascript的时候，最好用相对路径。比如下面的目录结构：

1
2
3
4
a/
    1.html
    javascripts/
        1.js

在html里最好写成./javascripts/1.js，而不是/a/javascripts/1.js

因为这样只要相对的目录结构不改，就不需要修改路径。比如把目录a改名成b，如果用的是绝对路径的话，html里就都要改一遍，我今天早上就在这块花了很多时间

另外还有一个好处，如果使用相对路径，那么在现在大部分的IDE里，都是可以直接点进去查看源文件的。但是如果写成绝对路径的话，在开发的时候就链不过去了，比较不方便

在js里，考虑使用绝对路径，css可以放心用相对路径

为什么呢，比如在js里有这样的代码：

1
location.href = "../../abc.html"

而2个层级不同的html都引用了这个js，那上面这行代码就会出错。因为js里的相对路径，是以___加载它的页面路径___为基准的。所以这种情况下，用绝对路径就不容易出错

不同的是，css中的相对路径，是以___css文件所在的路径___为基准的，所以在css里，可以放心地使用相对路径

兼容老入口的方法

有一个html，原来的URL是

1
www.abc.com/a/html/1.html

现在移到了

1
www.abc.com/b/1.html

因为各种原因，必须保留原来的URL可用，比如已经发出去的老版本APP，有一个页面链接到这个地址。那如果2边维护就很麻烦，1.html每次更新，都要在2个位置替换一遍。一个好的办法是，只需要替换新URL的文件，把老位置的文件做跳转：

1
location.href = "http://www.bac.com/b/1.html"

这样就不需要总是替换2遍了，而且老的URL也可以继续正常访问。一直到老版本的app都升级以后，再去掉旧的URL就可以了