SSR 为什么会报 window is not defined

先理解原理和示例,再练习完整口述与追问。

服务端没有浏览器对象。浏览器操作放到合适的客户端生命周期,或用 process.client 判断;依赖导入本身若就访问 window,需要客户端插件或客户端动态导入。仅包住页面渲染未必能解决模块导入时的报错。

SSR 执行的是服务端 JavaScript,没有浏览器全局对象。报错可能发生在组件方法运行时,也可能在依赖模块被 import 的瞬间。因此仅在调用处判断 process.client 不一定够:若静态导入已读取 window,需要把导入本身放进客户端专用路径。

排查顺序是看堆栈定位模块 → 检查顶层代码 → 判断是否为浏览器库 → 使用 Nuxt2 .client.js 插件或客户端动态 import。服务端先输出稳定占位,客户端挂载后初始化实例;销毁时清理。通用工具如果只需要 URL 或日期等能力,应优先采用两端可用的接口。

不要给 Node 伪造一个空 window 来隐藏报错,它不能提供真实 DOM,也可能让库走入错误分支。客户端条件导致首屏结构不同,还需处理水合一致性。

SSR 运行在服务端,没有 window、document、localStorage 等浏览器对象。DOM 逻辑应放 mounted 等客户端阶段或在执行处判断 process.client。若第三方模块在 import 时就访问 window,光给使用代码加判断不够,要把导入也改成客户端插件或合适的客户端动态加载。Nuxt2 插件可用 .client.js 注册并在配置声明;模板外包 client-only 也不能保证模块顶层导入不执行。