Vite项目中应优先使用原生navigator.clipboard API，无需import，仅在安全上下文（https/localhost）下调用；避免引入clipboard.js等非ESM兼容库，若需第三方方案可选copy-to-clipboard或clipboard-polyfill。
Vite 默认不支持直接导入浏览器原生 API（如 navigator.clipboard）的模块化写法，若你在代码中写了类似 import { Clipboard } from 'clipboard' 或误配了第三方剪贴板库，打包时就容易报错。真正的问题往往不是 Vite “处理不了”剪贴板，而是引入方式、运行环境或库兼容性不匹配。
确认你用的是原生 Clipboard API，而非第三方库
Vite 项目中推荐优先使用浏览器原生 navigator.clipboard，它无需安装依赖、无打包问题，但只在安全上下文（https 或 localhost）下可用：
- 不要写
import Clipboard from 'clipboard'—— 这是已停止维护的第三方库，与 Vite 的 ESM 构建不兼容 - 也不要试图
npm install clipboard后在 Vite 中直接 import，它依赖 DOM 全局变量且含 UMD/CJS 混合逻辑，易触发__dirname is not defined或global is not defined - 正确做法：直接调用
navigator.clipboard.writeText(...)，无需 import，Vite 会原样保留运行时调用
若必须用第三方库，选 ESM 友好、轻量的替代方案
如需更复杂的剪贴板功能（如监听、富文本、图片支持），可选用现代 ESM 原生支持的库：
-
copy-to-clipboard：纯函数、无副作用，Vite 下开箱即用（import copy from 'copy-to-clipboard'） -
@sozialhelden/clipboard-polyfill：提供navigator.clipboard的 polyfill，ESM 导出明确，适合需要兼容旧浏览器的场景 - 避免使用
clipboard.js（v2.0.8+ 已废弃）、angular-clipboard等非 ESM 主力维护的库
检查构建时是否误触服务端渲染（SSR）逻辑
如果你开启了 Vite 的 SSR 模式（如使用 vite-plugin-ssr 或自定义 SSR 配置），而剪贴板代码未做环境判断，就会在 Node.js 环境执行 navigator.clipboard 导致报错：
立即学习“Java免费学习笔记（深入）”；
- 确保剪贴板操作仅在客户端执行：
if (typeof window !== 'undefined' && navigator.clipboard) - 在 Vue/React 组件中，把剪贴板调用放在
onMounted/useEffect里，避开 SSR 渲染阶段 - Vite 配置中可显式排除相关模块 SSR：
ssr: { noExternal: ['copy-to-clipboard'] }（仅当该库确实被 SSR 引入时）
常见报错及快速修复对照
遇到以下错误时，按对应原因处理：
-
ReferenceError: navigator is not defined→ 未做客户端判断，补上if (typeof window === 'undefined') return -
Cannot find module 'clipboard'→ 删除npm install clipboard及所有相关 import，改用原生 API -
TypeError: Cannot read properties of undefined (reading 'clipboard')→ 浏览器不支持或页面未启用安全上下文（检查地址栏是否为 http://127.0.0.1 而非 http://localhost？后者才被信任） -
__dirname is not defined→ 第三方库用了 Node.js 内置变量，换用 ESM 友好库或手动 shim（不推荐）
