18.5.2 使用跨平台的 API

同一份组件代码既在浏览器又在服务器运行，一旦用了平台特有的 API，服务端就会直接报错。

一、避开平台特有的 API

• 服务端没有 window、document 等浏览器专属对象，编写同构代码时要避免直接使用；
• 无法避开时，用环境变量（如 import.meta.env.SSR）做代码守卫；
• 为减轻心智负担，优先选择跨平台的第三方库，例如 axios、lodash。

// 只在客户端访问 window / document
if (!import.meta.env.SSR) {
  const width = window.innerWidth
}

同类问题还包括 localStorage、navigator 等：它们在服务端不存在，必须用 import.meta.env.SSR 守卫。

相关

• 18.5.3 只在某一端引入模块：用同一个环境变量把整个模块的加载限制在客户端
• 18.5.1 组件的生命周期：服务端可用的钩子更少，副作用要放在客户端