vue 获取域名,vps香港安畅,vps chicago vps,virmachvps搭建教程,国内高速云服务器vps

🗣 Wd提问: vue 获取域名

🤖 Ai回答:
在 Vue 项目中获取当前页面的域名（包括协议和端口），可以通过 JavaScript 的 `window.location` 对象来实现。以下是几种常用的方法：

✅ 获取当前域名（含协议和端口）

javascript
// 获取完整的域名（如：https://65.hk:8080）
const fullDomain = window.location.href;

✅ 只获取主机名（不含协议和路径）

javascript
// 获取主机名（如：65.hk 或 localhost:8080）
const hostname = window.location.hostname;

// 如果需要带端口号（如：localhost:8080）
const host = window.location.host;

✅ 获取协议（http 或 https）

javascript
const protocol = window.location.protocol; // 如：https:

✅ 获取端口号

javascript
const port = window.location.port; // 如：8080，如果默认端口则为空字符串

✅ 组合成完整域名（推荐方式）

javascript
function getDomain() {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
const port = window.location.port ? ':' + window.location.port : '';
return `${protocol}//${hostname}${port}`;
}

// 使用示例
console.log(getDomain()); // 输出：https://65.hk 或 http://localhost:8080

📌 在 Vue 组件中使用

vue
<template
<div
<p当前域名：{{ domain }}</p
</div
</template

<script
export default {
data() {
return {
domain: ''
};
},
mounted() {
this.domain = this.getDomain();
},
methods: {
getDomain() {
const protocol = window.location.protocol;
const hostname = window.location.hostname;
const port = window.location.port ? ':' + window.location.port : '';
return `${protocol}//${hostname}${port}`;
}
}
};
</script

⚠️ 注意事项

`window.location` 是浏览器全局对象，只能在客户端运行时使用。
在服务端渲染（SSR）环境中（如 Nuxt.js、Vue SSR），需注意 `window` 是否存在，建议加判断：

javascript
const domain = typeof window !== 'undefined' ? getDomain() : 'server-side';

✅ 总结

| 目标 | 方法 |

| 完整 URL | `window.location.href` |
| 主机名 | `window.location.hostname` |
| 主机+端口 | `window.location.host` |
| 协议 | `window.location.protocol` |
| 端口 | `window.location.port` |

如果你是在 Nuxt.js 或其他 SSR 框架中，也可以通过 `process.client` 来安全地访问 `window`：

javascript
if (process.client) {
const domain = window.location.origin;
}

✅ 建议使用 `window.location.origin` 简化获取完整域名：

javascript
const domain = window.location.origin; // 如：https://65.hk 或 http://localhost:8080

这是最简洁且推荐的方式！

如有具体场景（如跨域、环境变量等），欢迎补充，我可以提供更精准的方案。

Ai作答

📣 商家广告：