javascript - 为什么在heroku中托管时导航器的剪贴板对象未定义？

Question

我正在使用导航器的剪贴板对象使用 vuejs 将文本复制到剪贴板。在本地托管之前它工作正常，使用 heroku 托管将 navigator.clipboard 返回为未定义。有谁知道它的解决方法？

copyToClipboard(text){
    console.log("inside copyclipboard method")
    console.log(text)
    navigator.clipboard.writeText(text).then(function() {
        console.log("inside write text")
        this.showSuccessfulClipboardCopySnackBar = true
    }.bind(this))
    console.log("after writetext")
} 

托管在本地服务器中时导致控制台

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
after writetext
inside write text

在heroku中托管时在控制台中产生结果

inside copyclipboard method
201812_BBSR_RAI_VID_AS4567_1234
** Uncaught TypeError: Can not read property 'writeText' of undefined. **