在 Vue 中获取当前域名主机（协议+域名+端口）

云游道人 2025-04-15 686 阅读 0评论

在 Vue 中获取当前域名主机（协议+域名+端口）可通过多种方式实现，以下是具体方法及适用场景的总结：

一、使用 window.location 对象（通用方法）

通过浏览器原生 API 获取完整的域名主机信息：

// 获取完整域名主机（包括协议、域名、端口） const fullHost = window.location.origin; // 示例：https://www.example.com:8080 // 分解域名主机的各个部分 const protocol = window.location.protocol; // 协议（如 https:） const hostname = window.location.hostname; // 域名（如 www.example.com） const port = window.location.port; // 端口（如 8080，若默认端口则返回空）

适用场景：

需要获取完整的域名主机信息，包括协议和端口

不依赖 Vue Router 的简单场景。

二、结合 Vue Router 与 window.location（推荐用于 SPA）

在单页应用中，通过 window.location.origin 获取域名主机，并与路由路径组合：

// 获取当前域名主机 + 路由路径 const fullUrl = window.location.origin + this.$route.fullPath; // 示例：https://www.example.com:8080/path?param=1

注意：

this.$route.fullPath 仅返回路径和参数，需与 window.location.origin 拼接才能得到完整 URL

此方法兼容单页应用无刷新跳转的特性

三、通过环境变量配置（多环境适配）

在 .env 文件中预定义域名主机，适用于不同环境（开发/生产）：

# .env.development VUE_APP_BASE_HOST=https://dev.example.com:8080 # .env.production VUE_APP_BASE_HOST=https://www.example.com

在代码中读取：

const baseHost = process.env.VUE_APP_BASE_HOST;

适用场景：

需根据环境动态切换域名主机

避免硬编码，提升代码可维护性。

四、特殊场景处理

1. 仅获取域名（不含协议和端口）

const domain = window.location.hostname; // 如 www.example.com

2. 处理默认端口的隐藏

若端口为默认值（HTTP 80/HTTPS 443），window.location.origin 会自动省略端口：

// 示例：https://www.example.com（端口443自动隐藏） console.log(window.location.origin);

五、注意事项

响应式更新问题 window.location 的值不会随路由变化自动更新，若需响应式监听 URL 变化，需结合 watch 监听 $route 对象

跨域限制通过 window.location 获取的域名受浏览器同源策略限制，无法直接访问跨域域名信息。

完整代码示例

<template> <div> <p>当前域名主机：{{ currentHost }}</p> </div> </template> <script> export default { data() { return { currentHost: window.location.origin // 直接获取域名主机 }; }, mounted() { // 动态监听路由变化（可选） this.$watch( () => this.$route, () => { console.log('路径变化后的域名主机：', window.location.origin); } ); } }; </script>

通过上述方法，可灵活应对不同场景下的域名主机获取需求。

喜欢就支持以下吧