为什么在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. **