最近在项目中做了一个代码块复制功能因为项目本身已经集成了VueUse所以直接使用vueuse/core提供的useClipboard组合式 API。毕竟VueUse已经帮我们封装好了常用逻辑直接拿来用既方便又省事。实现代码非常简单import{useClipboard}fromvueuse/coreconst{copy}useClipboard()consthandleCopyasync(){awaitcopy(code)}本地开发环境测试的时候一切正常点击复制按钮后能够正确写入剪贴板也能正常弹出复制成功提示所以当时我觉得这个功能已经开发完成没有再深入关注兼容性问题就直接提交了代码。结果部署到测试环境后同事反馈复制按钮点击没有任何反应。刚开始我还以为是他电脑的问题我电脑可以但排查一圈之后发现都不是。问题排查首先对比了一下本地环境和测试环境的访问地址本地开发环境http://localhost:5173测试环境http://192.168.xxx.xxx:8080乍一看两个环境似乎没什么区别都是HTTP协议。但实际上浏览器对于localhost和普通IP地址的处理方式并不一样。为了验证自己的猜测我打印了一下当前页面是否处于安全上下文console.log(window.isSecureContext)结果发现localhost true 192.168.xxx.xxx false这时候问题基本已经有方向了。useClipboard()底层到底用了什么带着疑问翻了一下VueUse的实现发现默认情况下const{copy}useClipboard()最终调用的还是浏览器原生Clipboard APInavigator.clipboard.writeText(text)而这个API有一个比较著名的限制它只能运行在安全上下文Secure Context中。通常情况下以下环境可以正常使用https://xxx.com http://localhost而下面这些环境则可能无法正常使用http://192.168.xxx.xxx http://10.xxx.xxx.xxx http://test.xxx.xxx这也解释了为什么本地环境一切正常而测试环境却直接失效。一个被忽略的配置legacy继续查阅VueUse文档的时候我发现useClipboard其实还有一个配置项const{copy}useClipboard({legacy:true})刚开始看到这个配置的时候并没有太在意后来尝试加上之后重新部署测试环境结果复制功能立即恢复正常。最终代码变成了这样import{useClipboard}fromvueuse/coreconst{copy,copied}useClipboard({legacy:true})consthandleCopyasync(){awaitcopy(code)}测试之后发现无论是本地开发环境还是内网测试环境复制功能都能够正常工作。legacy: true 到底做了什么看到这里可能会有疑问为什么仅仅增加一个配置项就能解决问题实际上useClipboard()默认优先使用的是navigator.clipboard.writeText(text)而当开启legacy:true之后VueUse会在Clipboard API不可用的情况下自动降级到传统复制方案document.execCommand(copy)简单来说就是当浏览器支持Clipboard API时优先使用现代方案当浏览器环境不满足要求时则自动回退到旧版复制实现。因此对于很多内网系统来说即使没有HTTPS也依然能够正常复制内容。如果自己实现兼容方案如果项目中没有使用VueUse其实也可以自己实现类似的兼容逻辑。比较常见的写法如下consthandleCopyasync(text:string){try{if(navigator.clipboardwindow.isSecureContext){awaitnavigator.clipboard.writeText(text)return}// 在页面上动态创建一个隐藏的 textarea 文本框consttextareadocument.createElement(textarea)textarea.valuetext// 防止页面抖动textarea.style.positionfixedtextarea.style.left-9999pxtextarea.style.top-9999pxdocument.body.appendChild(textarea)// 选中文字并执行复制textarea.focus()textarea.select()constsuccessdocument.execCommand(copy)document.body.removeChild(textarea)if(!success){thrownewError(复制失败)}}catch(error){console.error(复制失败,error)}}这种方案的思路也很简单优先使用Clipboard API当API不可用时再使用document.execCommand(copy)作为降级方案。不过既然VueUse已经帮我们封装好了这些逻辑对于Vue项目来说直接开启legacy: true显然更加方便。还有一个容易忽略的问题虽然legacy: true解决了HTTP环境下的兼容性问题但它并不能绕过浏览器的所有安全限制。例如下面这种写法setTimeout(async(){awaitcopy(text)},1000)或者axios.get(/api).then(async(){awaitcopy(text)})在部分浏览器中仍然可能失败。原因在于浏览器要求复制行为必须由用户主动触发例如点击按钮、点击菜单等操作。因此最稳妥的方式仍然是绑定在用户事件中template button clickhandleCopy 复制 /button /template这样兼容性会更好。总结这次踩坑最大的收获并不是学会了复制功能怎么写而是发现了一个很容易被忽略的问题开发环境和测试环境看起来相同但浏览器对它们的处理方式可能完全不同。最开始使用的是const{copy}useClipboard()由于本地开发环境使用的是localhost所以整个开发阶段都没有暴露问题。直到部署到测试环境后才发现默认实现依赖的Clipboard API在当前环境下无法正常工作。最终解决方案其实非常简单const{copy}useClipboard({legacy:true})