navigator.clipboard的使用需要一个安全的来源。因此，如果您的开发环境是通过HTTP服务的，那么剪贴板方法将不可用。

• 根据MDN Clipboard文档 *

此功能仅适用于secure contexts（HTTPS）以及部分或所有支持的浏览器。
也许您可以检查window.isSecureContext是否可以使用此方法，并相应地禁用复制文本按钮。

变通方案

最好的选择是在你的开发环境中使用HTTPS。
但既然你要求一个变通方案，这里有一个（非常黑客）的工作方法。使用Document.exec命令，这不再是推荐的，而有利于ClipboardAPI。

function unsecuredCopyToClipboard(text) {
  const textArea = document.createElement("textarea");
  textArea.value = text;
  document.body.appendChild(textArea);
  textArea.focus();
  textArea.select();
  try {
    document.execCommand('copy');
  } catch (err) {
    console.error('Unable to copy to clipboard', err);
  }
  document.body.removeChild(textArea);
}

用法

然后，您可以检查是否为!navigator.clipboard并调用fallback方法，否则继续使用普通的navigator.clipboard.writeText(...)函数。例如：
x一个一个一个一个x一个一个二个x

最好使用async，并将代码放在try catch块中。

async copyCode() {
 try {
     await navigator.clipboard.writeText(this.input);
 } catch (e) {
     console.log(e);
 }
}

我也遇到了同样的问题，这里有一个解决方案
#不要使用--xnavigator.clipboard.writeText()
#使用--〉document.execCommand('copy')