vue3 获取域名,

🗣 SL提问: vue3 获取域名

✍️ Ai批改: 在 Vue 3 应用中获取当前页面的域名（domain），你可以使用浏览器提供的 `window.location` 对象。这与你是否使用 Vue 没有直接关系，但你可以在 Vue 3 的组件或组合式 API 中方便地使用它。

-

✅ 获取域名的方法

js
const domain = window.location.hostname;

`window.location.hostname` 返回当前页面的域名（不带协议和端口）。

例如：
如果 URL 是 `https://www.example.com:8080/path`，
则 `window.location.hostname` 返回：`www.example.com`

-

🧩 示例：在 Vue 3 组件中使用（setup 语法）

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

<script setup
import { ref, onMounted } from 'vue';

const domain = ref('');

onMounted(() = {
domain.value = window.location.hostname;
});
</script

-

🧩 示例：在 Vue 3 Composition API 中封装成可复用函数

js
// useDomain.js
export function useDomain() {
const domain = window.location.hostname;
return { domain };
}

然后在组件中使用：

vue
<script setup
import { useDomain } from './useDomain';

const { domain } = useDomain();
</script

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

-

🔒 注意事项

如果你在 SSR（如 Nuxt.js）环境中运行 Vue 3，请注意 `window` 在服务端不可用，需要在合适的生命周期钩子中使用（如 `onMounted`）。
如果你想获取完整的主机地址（包括端口），可以使用 `window.location.host`。

-

📌 补充：常用 location 属性

| 属性 | 示例 | 含义 |

| `location.href` | `https://www.example.com:8080/path` | 完整 URL |
| `location.protocol` | `https:` | 协议 |
| `location.host` | `www.example.com:8080` | 域名 + 端口 |
| `location.hostname` | `www.example.com` | 仅域名 |
| `location.port` | `8080` | 端口号 |
| `location.pathname` | `/path` | 路径部分 |

-

如果你有特定的需求，比如想获取后端 API 域名、跨域场景等，也可以告诉我，我可以提供更详细的解决方案。