esmodule在ssr中因访问window报错，本质是服务端无浏览器环境；需避免模块顶层访问浏览器对象，通过条件判断、动态导入、运行时检测隔离客户端逻辑，并确保浏览器相关操作推迟至客户端生命周期执行。
ESModule在SSR中因访问window报错，本质是服务端没有浏览器环境。解决核心是**避免在模块顶层或服务端执行阶段访问浏览器专属对象**，并通过条件判断、动态导入、运行时检测等方式隔离客户端逻辑。
区分服务端与客户端执行时机
Node.js环境下window未定义，任何在模块顶层（即import时）直接读取window、document或调用DOM API的代码都会立即报错。必须确保这些操作只在浏览器中运行。
- 不要在模块顶层写
const width = window.innerWidth这类代码 - 把依赖
window的逻辑移到组件挂载后（如useEffect、onMounted）、事件回调或函数内部 - 服务端渲染时，组件首次渲染应使用默认/占位数据，等客户端激活后再获取真实值
使用动态导入（dynamic import）延迟加载客户端模块
对纯客户端库（如chart.js、swiper），用import()异步加载，确保它只在浏览器中执行：
// ✅ 正确：仅在客户端运行时加载
let Chart;
if (typeof window !== 'undefined') {
Chart = (await import('chart.js')).default;
}
在React中常配合useEffect使用，在Vue中可在onMounted中调用import()。
封装安全的环境判断工具函数
避免重复写typeof window !== 'undefined'，可封装一个轻量工具：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
export const isClient = typeof window !== 'undefined'; export const isServer = !isClient;
再结合该判断做逻辑分支：
- 初始化状态时用默认值：
const [width, setWidth] = useState(isClient ? window.innerWidth : 1200) - 监听事件只在客户端注册：
if (isClient) window.addEventListener('resize', handler) - 服务端返回空占位组件，客户端再替换为真实UI
配置构建工具跳过服务端打包中的浏览器模块
Webpack/Vite等工具支持externals或ssr: { noExternal: [...] }选项，防止将浏览器专用模块打包进服务端代码。例如Vite中：
export default defineConfig({
ssr: {
noExternal: ['chart.js'] // 允许SSR时external该包，避免解析报错
}
})
同时确保package.json中该模块未被标记为type: "module"且无exports字段强制ESM解析——否则Node可能尝试加载却找不到window。
不复杂但容易忽略：关键不是“怎么让window存在”，而是“不让它被提前访问”。把浏览器相关逻辑真正推迟到客户端生命周期里，SSR就能稳定运行。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
