Question

我尝试使用不基于vue的外部脚本（https://libs.crefopay.de/3.0/secure-fields.js）

我通过-tags将脚本添加到index.html

但是当我尝试对对象进行整理时，例如在脚本发布者的示例中。

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

Vue说“未定义'SecureFieldsClient'”

如果我使用 this。

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

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' })
  }
}
}

我的错误在哪里？

编辑：更新了孔问题

Answer 1

这是您提供的上下文的最小Vue应用程序，可以运行： https://codepen.io/krukid/pen/voxqPj

没有其他详细信息，很难说出您的特定问题是什么，但是很可能在方法执行后后加载了库，因此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)
},

Answer 2

您可以下载脚本，然后使用import指令通过webpack加载脚本。您的项目中可能有类似import Vue from 'vue';的东西。这只是从节点模块中导入vue。

与其他外部脚本完全相同，只是使用相对路径。使用Vue-CLI时，您可以执行import i18n from './i18n';，其中src文件夹将包含一个i18n.js

如果您确实要使用CDN，则可以像往常一样添加它，然后将其添加到外部设备：https://webpack.js.org/configuration/externals/#externals，以便从Webpack内对其进行访问

Answer 3

我找到了解决方法。

导入从来都不是问题。

我只需要忽略//通过eslint-disable-next-line抱怨缺少“ this”的VUE / eslints，它就会起作用。

因此外部函数/对象看起来应该没有“ this”。

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

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

3 个答案: