元素
元素
工具
博客
问答

SSR下如何正确处理Vue组件中的window对象访问？

Code°贝贝 阅读 3
优化

我在用Nuxt做服务端渲染时，有个组件需要读取window.innerWidth，但一刷新页面就报“window is not defined”错误。本地开发没问题，部署到服务器就挂了。是不是得加判断？但我试了process.client也不太对。

这是我的组件代码：

<script setup>
const screenWidth = ref(0)

onMounted(() => {
  screenWidth.value = window.innerWidth
})

watchEffect(() => {
  console.log('当前宽度:', screenWidth.value)
})
</script>

<template>
  <div>屏幕宽度：{{ screenWidth }}px</div>
</template>
我来解答 赞 2 收藏
二维码
手机扫码查看
反馈
1 条解答
玉英酱~
玉英酱~ Lv1
可以试试这样，在访问 window 对象之前先判断一下是否在客户端环境。你可以利用 process.client 来做这个判断，因为你提到 process.client 也不太对，可能是因为用法不对。其实 process.client 是用来检测当前代码是否运行在客户端的，你可以这样改你的代码：

script setup>

import { ref, onMounted, watchEffect } from 'vue'



const screenWidth = ref(0)



onMounted(() => {

  if (process.client) {

    screenWidth.value = window.innerWidth

  }

})



watchEffect(() => {

  console.log('当前宽度:', screenWidth.value)

})


这段代码会在组件挂载后检查是否在客户端，如果是的话再访问 window.innerWidth，这样就不会在服务端渲染时报错了。希望这能解决你的问题！
点赞
2026-03-21 11:02
相关推荐
元素
元素
工具
博客
问答
登录/注册