Nuxt 中 process.client 与 import.meta.client 的区别

2025-10-24

1029 字约 4 分钟

...

一、来源与定义

对比项	process.client	import.meta.client
来源	Nuxt 内置的运行时变量（兼容 Node 风格）	Vite 原生 ESM 构建标志
定义位置	Nuxt 在构建阶段自动注入到全局	Vite 在编译阶段静态替换
作用机制	运行时判断变量	构建时编译宏（静态替换）
语法类型	CommonJS 风格	ES Module 风格

二、使用时机

process.client

这是 Nuxt 专用的运行时标志，在 Nuxt 的 SSR + CSR 模式下非常常用：

服务端渲染（Node 阶段）为 false
客户端渲染（浏览器阶段）为 true

适用于在 同一个文件 中区分客户端与服务端执行逻辑：

if (process.client) {
  console.log('只在客户端执行')
  window.localStorage.setItem('x', '1')
}
if (process.server) {
  console.log('只在服务端执行')
}

注意：process 在纯 Vite 项目中是不存在的，这是 Nuxt 提供的兼容变量。

import.meta.client

这是 Vite 提供的构建期宏（compile-time flag），属于静态替换标志，不能在运行时动态判断。

if (import.meta.client) {
  console.log('客户端代码（仅在构建时被保留）')
}

构建后：

构建客户端包时，这个分支会被保留
构建服务端包时，这个分支会被完全移除

因此更适合做 编译期条件分支，而不是运行时逻辑判断。

三、区别总结

特性	process.client	import.meta.client
判断时机	运行时判断	编译时（构建期）判断
支持环境	Nuxt 专属	任意 Vite 项目（Nuxt 也支持）
是否可在 setup() 使用	可以	可以
是否可被 tree-shaking 优化	不行（保留运行时代码分支）	可以（死代码会被移除）
典型用途	运行环境判断（DOM、localStorage 等）	仅保留客户端构建逻辑或模块
性能差异	有运行时分支判断开销	无运行时开销（编译期剔除）

四、实践建议

需要区分“是否在客户端执行”（访问 window、document、localStorage 等）时，建议：

if (process.client) {
  // 运行时执行客户端逻辑
}

需要让 SSR 构建完全移除 某段仅在浏览器使用的逻辑或依赖时，建议：

if (import.meta.client) {
  const lib = await import('some-browser-only-lib')
}

五、对比示例

// 不推荐：process.client 在 SSR 构建时不会剔除对该模块的静态依赖解析
if (process.client) {
  const lib = await import('browser-only-lib')
}

// 推荐：import.meta.client 在服务端构建时会把这一段直接移除
if (import.meta.client) {
  const lib = await import('browser-only-lib')
}