在 Vue 中获取当前域名的方法

在 Vue 应用中，你可以通过以下几种方式获取当前域名：

1、使用 `window.location` 对象

javascript
// 获取完整域名（包含协议）
const fullDomain = window.location.origin; // 例如: https://example.com

// 获取主机名（不包含协议和端口）
const domain = window.location.hostname; // 例如: example.com

// 获取端口（如果需要）
const port = window.location.port; // 例如: 8080 或空字符串（如果是80或443）

// 在Vue组件中使用
export default {
mounted() {
console.log('当前域名:', window.location.hostname);
}
}

2、使用 Vue 的环境变量

如果你需要根据环境（开发/生产）获取不同的域名，可以在环境变量中配置：

`.env.development` 文件:

VUE_APP_API_DOMAIN=dev.example.com

`.env.production` 文件:

VUE_APP_API_DOMAIN=example.com

然后在代码中访问：
javascript
const domain = process.env.VUE_APP_API_DOMAIN;

3、使用 `document.domain`

javascript
const domain = document.domain; // 返回当前文档的域名

注意：`document.domain` 有一些安全限制，现代浏览器可能会限制其使用。

4、在 SSR (Nuxt.js) 中的处理

如果你使用 Nuxt.js，需要同时考虑客户端和服务端的情况：

javascript
// 在Nuxt插件或组件中
const getDomain = () = {
if (process.server) {
return process.env.API_DOMAIN 'defaultdomain.com';
} else {
return window.location.hostname;
}
};

注意事项

1、在开发环境中（localhost），`window.location.hostname` 会返回 localhost
2、如果网站使用子域名，这些方法会返回完整的子域名（如 sub.example.com）
3、出于安全考虑，浏览器可能会限制某些域名属性的访问

根据你的具体需求选择合适的方法即可。