vue获取域名怎么做？(详细步骤轻松上手教程)

发布日期： 2025-12-12 阅读量： 作者： admin

今天遇到个需求，要在Vue项目里把当前域名搞出来显示。刚开始以为简单得很，不就是浏览器地址栏里那串东西嘛结果真正动手才发现里头还有点小弯弯绕。

我先撸起袖子，直接在Vue组件里想掏浏览器自带的那个对象。打开常用的那个单文件组件，在<script setup>区域啪嗒啪嗒敲：

const currentDomain = *;


*('当前域名是', currentDomain); // 想先打印看看

手指一按保存，浏览器控制台唰一下亮了，域名确实出来了！心里刚得意了半秒，突然想起个事儿——这玩意儿只能在客户端跑！万一我这页面是服务器端渲染的，像*那种，它不得当场歇菜报错？一琢磨还真悬，window这玩意儿在服务器那边可是不存在的。

那咋整？得找个靠谱的方法。扭头就跑去翻Vue官方文档，查了一圈没特别说这个的。回头一想，环境变量不是经常用来存基础配置嘛域名也算一种配置！赶紧琢磨用.env文件来搞它。

立马在项目根目录底下新建了个文件，就叫（记得加.local防止提交到代码库暴露隐私）。打开它，直接往里怼：

VUE_APP_CURRENT_DOMAIN = '*' // 这里填你真正的域名

保存好文件，火急火燎跑回我的Vue组件。这时候不用傻乎乎去碰window了，改用这个全局对象来抓这个环境变量：

const domainFromEnv = *_APP_CURRENT_DOMAIN;


*('从.env抓到的域名：', domainFromEnv);

刷新页面一看控制台，成了！域名稳稳当当地打印出来了。这招的好处是：

不过咧，这里头也有坑得绕着走：

环境变量名必须用VUE_APP_开头！不然Vue它看不见，我刚开始就忘了这茬，变量名光秃秃的CURRENT_DOMAIN，试了半天啥都没抓到，气得我直拍大腿。
改了.env文件后，必须重启开发服务器！热更新它认不了.env的改动，我就傻乎乎刷新浏览器好多次，屁用没有，重启npm run serve才灵。

这样搞一圈下来，总结起来就是一句话：想稳当拿到Vue项目里的域名？.env文件里藏一手最省心！

随便看看