Javascript 如何在vue中使用外部非vue脚本

我尝试使用不基于vue的外部脚本（）

我将脚本via-tags添加到index.html中

但是当我尝试关联一个对象时，比如在脚本发布者的例子中

let secureFieldsClientInstance =
      new SecureFieldsClient('xxxxx',
        this.custNo,
        this.paymentRegisteredCallback,
        this.initializationCompleteCallback,
        configuration)

Vue表示“'SecureFieldsClient'未定义”

如果我用这个

Vue显示：v-on处理程序中出现错误：“TypeError:this.SecureFieldsClient不是构造函数”

我的代码：

methods: {
startPayment () {
  this.state = null
  if (!this.selected) {
    this.state = false
    this.msg = 'Bitte Zahlungsweise auswählen.'
  } else {
    localStorage.payment = this.selected
    let configuration = {
      url: 'https://sandbox.crefopay.de/secureFields/',
      placeholders: {
      }
    }
    let secureFieldsClientInstance =
      new SecureFieldsClient('xxxxx',
        this.custNo,
        this.paymentRegisteredCallback,
        this.initializationCompleteCallback,
        configuration)
    secureFieldsClientInstance.registerPayment()
    // this.$router.replace({ name: 'payment' })
  }
}
}

我的错在哪里

编辑：

---

更新了洞问题

这里有一个适用于您提供的上下文的最小Vue应用程序，它可以工作：

如果没有其他详细信息，很难说您的具体问题是什么，但最有可能的是，在执行方法之后，会加载库，因此，

window.SecureFieldsClient

预计尚未定义。或者，存在一些运行时错误，使脚本崩溃并阻止方法执行。可能还有其他一些更奇特的问题，但由于缺乏更广泛的背景，我只能猜测

要确保在运行库中的任何代码之前加载库，应将

onload

侦听器附加到外部脚本：

mounted () {
  let crefPayApi = document.createElement('script')
  crefPayApi.onload = () => this.startPayment()
  crefPayApi.setAttribute('src', 'https://libs.crefopay.de/3.0/secure-fields.js')
  document.head.appendChild(crefPayApi)
},

---

您可以下载脚本，然后使用

import

指令通过webpack加载脚本。您可能有类似于从“Vue”导入Vue的

import在您的项目中。这只是从节点模块导入vue

对于其他外部脚本也是一样的，只需使用相对路径。使用Vue CLI时，可以执行从“/i18n”导入i18n的
，其中
src
文件夹将包含一个
i18n.js

如果你真的想使用CDN，你可以像平常一样添加它，然后将它添加到外部：使它可以从网页中访问
我找到了解决方案

进口从来不是问题

我不得不忽略VUE/eslints，它通过//eslint禁用下一行来抱怨缺少“this”，然后它就可以工作了

因此，调用外部函数/对象时似乎不应使用“this”

let secureFieldsClientInstance =
      new SecureFieldsClient('xxxxx',
        this.custNo,
        this.paymentRegisteredCallback,
        this.initializationCompleteCallback,
        configuration)

您是否尝试将其添加到index.html文件中？如何添加？开始文件是App.vue。生成index.html。ah找到index.html，但仍然得到“TypeError:this.SecureFieldsClient不是构造函数”关于这一点的简要说明：请记住，像这样动态添加的脚本具有某些安全机制，以防止恶意意图。例如，您将无法使用
文档。从该脚本中写入
。@buffy虽然是真的，但外部脚本需要经过一系列浏览器检查-无论是CSP还是CORB，
document.write
在动态插入的脚本中无法按预期工作，因为脚本运行时文档已关闭。如果你同步包含脚本，它可能会起作用。谢谢你的回答，但这不是打字错误。getCustomerData是将数据初始加载到页面的函数。此.startPayment由buttonclick@Eardy很酷，未来的指针是包括所有相关的代码和/或排除不相关的部分（尽量减少用例），否则它会变得混乱，有很多拼写错误。无论如何，请查看更新的答案。它也不起作用。仍然得到“this.SecureFieldsClient不是构造函数”我不认为这是一个时间问题，当我单击按钮时，页面已完全加载。你还需要什么样的背景？这是一个非常简单的页面。谢谢你的回答，但我不想下载这个文件，因为它非常安全相关，而且我不希望它总是最新的。
let secureFieldsClientInstance =
      new SecureFieldsClient('xxxxx',
        this.custNo,
        this.paymentRegisteredCallback,
        this.initializationCompleteCallback,
        configuration)