Nuxt3中已定义variables却提示未定义的问题排查与修复

错误原因 #

1. Vue模板无需用this访问组件实例属性：Vue模板的表达式默认绑定组件实例，直接写属性名即可。你在v-show里用this.variables.appMenu，在SSR渲染阶段，this的指向并非预期的组件实例，导致无法读取variables，触发500错误。
2. （额外提示）SSR环境不存在window对象：你代码中注释了width: window.innerWidth，如果后续启用这行代码，也会在SSR阶段报错，因为服务器端没有window对象。

修复方法 #

1. 移除模板中的this引用 #

修改模板里的v-show表达式，直接使用variables.appMenu：

<div class="h-full transform transition-all duration-300 z-20 w-full flex absolute" v-show="variables.appMenu && widthStore.width < 688">

注：== true可以省略，布尔值直接判断即可。

2. （可选）处理window相关属性（若需启用width） #

如果需要获取窗口宽度避免SSR报错，可使用Nuxt3适配的方式，比如useWindowSize工具函数，或者仅在客户端执行相关逻辑：

// 在script中引入并使用useWindowSize
import { useWindowSize } from '@vueuse/core'

export default {
  data() {
    return {
      variables: {
        // ...其他状态
        width: 0
      }
    }
  },
  mounted() {
    // 仅在客户端执行
    const { width } = useWindowSize()
    this.variables.width = width.value
  }
}

验证 #

修改后重启Nuxt项目，SSR阶段的500错误会消失，页面加载能稳定正常运行，终端也不会再记录该错误。

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