前端页面一些路径问题的总结

今天把一个站点重新部署了一下，目录结构调整比较大，发现了几个问题，本文总结一下

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

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

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

a/

1.html

javascripts/

1.js

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

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

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

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

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

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

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

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

兼容老入口的方法

有一个html，原来的URL是www.abc.com/a/html/1.html，现在移到了www.abc.com/b/1.html

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

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

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

版权声明：本文为博主原创文章，未经博主允许不得转载。