vue获取当前域名,

🗣 SL提问: vue获取当前域名

✍️ Ai批改: 在 Vue 项目中获取当前页面的域名（即 `window.location` 的相关属性），你可以通过 Vue 实例中的 `data`、`methods` 或生命周期钩子（如 `mounted`）来操作。

以下是几种常见的方法来获取当前域名：

-

✅ 方法一：使用 `window.location.host`
javascript
export default {
data() {
return {
domain: window.location.host // 获取完整域名（包含端口号）
};
}
};

如果你只需要域名部分，不带协议和端口：
javascript
domain: window.location.hostname // 不含端口

-

✅ 方法二：在 `mounted` 生命周期中获取

javascript
export default {
data() {
return {
domain: ''
};
},
mounted() {
this.domain = window.location.host;
console.log('当前域名:', this.domain);
}
};

-

✅ 方法三：使用 computed 属性动态获取

javascript
export default {
computed: {
currentDomain() {
return window.location.host;
}
}
};

-

🧪 示例模板中使用

html
<template
<div
当前域名为：{{ currentDomain }}
</div
</template

-

🔍 常见属性说明

| 属性 | 含义 | 示例 |

| `window.location.host` | 主机名 + 端口号 | `example.com:8080` |
| `window.location.hostname` | 主机名 | `example.com` |
| `window.location.origin` | 完整源地址（协议+域名+端口） | `https://example.com:8080` |
| `window.location.protocol` | 协议 | `https:` |
| `window.location.port` | 端口号 | `8080` |

-

💡 小提示
如果你的 Vue 项目部署在子路径下（例如：`example.com/myapp`），你可能还需要结合 `process.env.BASE_URL` 来处理路径问题。
在 SSR（服务端渲染）环境下（比如 Nuxt.js），不能直接使用 `window` 对象，需要在 `mounted` 中调用或使用 `process.client` 判断。

-

如果你正在使用 Vue Router，也可以结合路由信息做更复杂的判断。

需要我帮你写一个完整的组件示例吗？