如何在Nuxt3中兼容浏览器与NodeJS使用crypto的randomUUID？

你之前的代码在浏览器中报错Uncaught (in promise) ReferenceError: global is not defined，核心原因是浏览器环境下误执行了Node.js端的require('crypto')逻辑——Nuxt3客户端中process对象依然存在（框架注入的环境对象），导致你原有的typeof process !== "undefined"判断在浏览器中也为true，触发了Node模块的导入逻辑，但浏览器不支持Node的require机制，且crypto模块依赖Node专属的global变量，从而引发错误。

解决方案 #

使用Nuxt3官方提供的编译时环境变量process.server和process.client来区分环境，这两个变量会在编译阶段被替换为布尔值，确保客户端代码中完全剔除服务端的导入逻辑，避免触发错误。

修改后的基础版本代码

// @ts-ignore
const crypto = process.server ? require('node:crypto') : window.crypto

export const useId = () => {
  const suffix = crypto.randomUUID().slice(0, 8)
  const $id = (name?: string) => name ? `${name}-${suffix}` : suffix
  return { $id }
}

带TypeScript类型声明的严谨版本

import type { Crypto as NodeCrypto } from 'node:crypto'

type CryptoProvider = NodeCrypto | typeof window.crypto

const crypto: CryptoProvider = process.server 
  ? require('node:crypto') 
  : window.crypto

export const useId = () => {
  const suffix = crypto.randomUUID().slice(0, 8)
  const $id = (name?: string) => name ? `${name}-${suffix}` : suffix
  return { $id }
}

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