解决前端项目中动态获取项目路径问题之Location对象

书到用时方恨少，用好对象没烦恼。

今天简单记录一下Location对象使用后的一些笔记。需求：处理项目中静态资源的（绝对路径的获取）

今天在全局处理项目静态资源路径的时候，想把相对路径全部换成绝对路径，这样的话方便后期维护，但是维护一个路径变量后期在开发过程中随着服务的改变还要反复修改这个路径，感觉很麻烦。所以我们可以动态的去获取当前的服务路径。

Location: Location 对象存储在 Window 对象的 Location 属性中，表示那个窗口中当前显示的文档的 Web 地址

Location 对象属性

属性	描述
hash	设置或返回从井号 (#) 开始的 URL（锚）。
host	设置或返回主机名和当前 URL 的端口号。
hostname	设置或返回当前 URL 的主机名。
href	设置或返回完整的 URL。
pathname	设置或返回当前 URL 的路径部分。
port	设置或返回当前 URL 的端口号。
protocol	设置或返回当前 URL 的协议。
search	设置或返回从问号 (?) 开始的 URL（查询部分）。

 

Location 对象方法

属性	描述
assign()	加载新的文档。
reload()	重新加载当前文档。
replace()	用新的文档替换当前文档。

 

今天主要了解三个属性：protocol   host  pathname

在控制台输出一下三个属性的输出效果：

var protocol = location.protocol; //获取http或https
var host = window.location.host; //获取IP和端口号
var pathname = window.location.pathname; //设置或返回当前 URL 的路径部分
var context = window.location.pathname.split("/"); //将pathname转换为数组，方便之后处理判断
var basePath = protocol + "//" + host;
console.log("protocol:结果是"+protocol)
console.log("host:结果是"+host)
console.log("pathname:结果是"+pathname)
console.log(context)

结果已经很清晰：所以封装了以下函数：

/**
 * @Date: 2020-07-02 17:49:16
 * @description: 获取文件绝对路径
 * @param {type} 
 */
function getPath(){
    var protocol = location.protocol; //获取http或https
    var host = window.location.host; //获取IP和端口号
    var context = window.location.pathname.split("/"); //获取项目名
    var basePath = protocol + "//" + host;
    // 此处要获取到哪一层 自己进行判断选择
    for(var i =0;i<context.length-1;i++){
        basePath+=context[i]+'/';
        if(context[i]==""){
            break;
        }

    }
    return basePath;
}