原本该项目是使用绝对路径的方式来加载静态资源，这种方式的优势在于简单明了、易维护，直接从项目的根目录下加载资源，在开发环境与部署在其他服务器下都运行良好，但是，当将该项目上传至Github Pages之后，则出现了静态资源404的问题。

以link标签为例，原加载css文件的源码如下。

而将项目部署到Github Pages之后，则出现了无法加载文件的问题。

究其原因是Github Pages所提供的静态站点路径问题。

https://xxzhiwei.github.io/github-pages/

可以看到域名下面还有一层以当前Github Pages项目仓库命名的目录，而项目的所有资源都存在于此，所以，使用绝对路径来引入资源的问题就出现了。

以"/"开头表示使用绝对路径，但在Github Pages下，"/"指的是"https://xxzhiwei.github.io/"，而不是"https://xxzhiwei.github.io/github-pages/"，所以才导致无法加载出资源的问题，因此解决方法就很显而易见了，只要在静态资源的路径前，再加一层Github Pages的项目名称就可以了。

但这样改动之后，在其他服务器部署当前项目时，也会出现静态资源404的问题，所以这始终不算一个很好的解决方案。

那有没有既兼容其他服务器，又兼容Github Pages引入静态资源的方法呢？

答案是有的，而且方法不止一种，但都具有各自的优缺点，需要根据项目的实际情况来考虑使用何种方式。

以相对路径的方式引入资源

这同时也是当前项目使用的方式，顾名思义就是以当前文件为参考对象，来引入其他路径下的资源。

./css/reset.css, ../css/theme-light.css

其中"./"表示当前目录，而"../"则表示上一级目录，不必考虑项目部署的位置（如/github-pages/），只要依靠项目中的相对路径，并保证路径正确就能正常运行。

以这种方式引入资源可以在单机模式下使用，甚至是不需要服务器也可以直接在浏览器上打开（使用File协议）。当然了，其应用场景不大，既然项目都部署到Github Pages上了，应该就不需要以本地文件的形式存在了吧？

看到这里你可能已经有一些眉目了，因为不同层级的文件相对于其他文件的路径都各不相同，一旦文件出现变动，与该文件相关的其他文件也必须一起修改，所以相对路径用起来是有点麻烦的。

特别是项目结构比较复杂时，其麻烦程度还要再上升一个量级，改动堪比火葬场，因此期间可能还会出现问候祖宗的现象。

所以，在结构复杂的项目中不推荐使用相对路径的方式来引入资源。

以网络路径的方式引入资源

还有一种好用且常见的方式，就是使用网络路径从第三方服务器来加载资源。

这种方式的优势在于，只要第三方服务器能正常提供服务时，不仅完全不需要考虑引用资源路径的问题，还能减少当前服务器的负载，相对的是需要连接外网。

但同时也还有一些问题需要考虑，比方说项目的文件是不是常常变动，如果以网络路径的方式来引入常变动的文件，那就意味着每次迭代项目，都要在第三方服务器更新引用的文件，这相对来说也是挺麻烦的；资源提供方是否能稳定提供服务...

混合使用

以上的方式都具有各自的特点和适用场景，而现在的环境下，更多选择的是两种方式混合在一起使用：固定不变的资源使用网络路径来加载，其他文件则使用相对或绝对路径（在Github Pages只能使用相对路径）。

如一些库文件、js插件就很适合使用网络路径来加载，而图片现在更多的是使用第三方服务器来存储/加载（如七牛、阿里云OSS等），

对于相对路径而言，虽然用起来麻烦，但在某些情况下（如Github Pages），不得不使用使用该种方式，下面有一些优化的方法。

• 将文件合并为一，以减少路径的修改，css、js都可以考虑
• 如果是使用框架、模板进行开发时，则可以考虑将引用的资源封装为一个组件（模块），统一管理和修改

总结一下，引用资源的路径分为三种，分别为绝对路径、相对路径、网络路径，但在不改变项目源码的情况下兼容部署在Github Pages和其他服务器的应用加载资源的只有相对路径和网络路径，它们都有各自的优势和特点，既可以在项目中单独使用，也可以组合在一起，这需要根据实际情况来考量。

以上就是本文的所有内容了，希望对你有所帮助。