NuxtJS V3中如何获取window.location.href完整绝对URL

需求场景 #

开发玩家扫码加入游戏功能时，由于游戏会部署在多个不同IP地址的环境中，需要动态生成带协议、IP/域名、端口的完整访问URL，不能硬编码地址。

之前尝试的方案问题 #

• 临时方案是增加输入框，让用户手动复制浏览器地址到输入框后触发生成二维码，操作繁琐体验差
• 直接在<script setup>顶层调用window.location.href会报错，代码无法正常运行
• 调用useRouter()/useRoute()的.fullPath属性，只能拿到/这类相对路径，无法得到类似http://10.16.1.173:3000/格式的完整绝对URL

实现方案 #

方案1：客户端挂载后获取（最稳妥，适配所有部署场景） #

所有依赖浏览器window对象的逻辑，放到仅客户端执行的onMounted生命周期中即可，SSR阶段不会执行该钩子，不会出现window未定义的报错：

<template>
  <img v-if="qrCodeData" :src="qrCodeData" alt="游戏加入二维码" />
</template>

<script setup>
const qrCodeData = ref(null)
// 替换成你实际需要拼接的加入路径，无额外路径可留空
const joinPath = ''

onMounted(() => {
  // window.location.origin 会直接返回当前访问地址的协议+域名/IP+端口部分
  const fullUrl = window.location.origin + joinPath
  // 沿用你之前的二维码生成逻辑即可
  QRCode.toDataURL(fullUrl, (err, dataUrl) => {
    if (err) throw err
    qrCodeData.value = dataUrl
  })
})
</script>

方案2：使用Nuxt内置API，支持SSR阶段获取 #

如果需要在服务端渲染阶段就拿到完整URL，不需要等客户端挂载，可以直接用Nuxt内置的useRequestURL()方法，服务端、客户端环境下都能正确返回当前请求的完整URL对象：

// 无需放在生命周期内，可直接在<script setup>顶层调用
const currentUrl = useRequestURL()
// 拼接得到完整访问地址
const fullUrl = currentUrl.origin + joinPath

问题原因说明 #

• 直接在顶层写window相关逻辑报错：Nuxt默认开启服务端渲染，服务端执行代码时不存在浏览器的window对象，会直接抛出引用错误
• useRoute()拿不到完整地址：路由实例仅维护路径、参数等路由相关信息，不包含请求域名、端口、协议这类主机信息，因此只能返回相对路径。

内容的提问来源于stack exchange，提问作者Dominik Zi