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

【问题标题】：How to use an external non vue script in vue如何在 vue 中使用外部非 vue 脚本
【发布时间】：2019-07-29 13:52:45
【问题描述】：

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

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

但是当我尝试对一个对象进行 intsanciate 时，就像在脚本发布者的示例中一样。

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

Vue 说“'SecureFieldsClient' 没有定义”

如果我使用 这个。

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

我的错误在哪里？

编辑：更新了坑题

【问题讨论】：

您是否尝试将其添加到 index.html 文件中？
怎么样？起始文件是 App.vue。 index.html 已生成。
啊找到了 index.html 但仍然得到“TypeError: this.SecureFieldsClient is not a constructor”

标签： javascript vue.js

【解决方案1】：

我找到了解决办法。

导入从来都不是问题。

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

所以看起来应该在没有“this”的情况下调用外部函数/对象。

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

【讨论】：

【解决方案2】：

这是您提供的上下文的最小 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)
},

【讨论】：

对此的快速说明：请记住，像这样动态添加的脚本具有某些安全机制来防止恶意意图。例如，您将无法在该脚本中使用 document.write。
@buffy 虽然外部脚本确实会受到一大堆浏览器检查 - 无论是 CSP 还是 CORB，document.write 在动态插入的脚本中都不会按预期工作，因为文档将包含在脚本运行时已关闭。如果您同步包含脚本，它可能会起作用。
感谢您的回答，但不是错字。 getCustomerData 是一个将数据初始化加载到页面中的函数。 this.startPayment 由按钮点击触发
@Eardy 很酷，未来的指针是包含所有相关代码和/或排除不相关的部分（最小化用例），否则会变得混乱，SO 上有很多错别字。无论如何，请参阅更新的答案。
它也不起作用。仍然得到“ this.SecureFieldsClient 不是构造函数” 我不认为这是一个时间问题，当我单击按钮时，页面已完全加载。你还需要什么上下文？这是一个非常简单的页面。

【解决方案3】：

您可以下载脚本，然后使用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 中访问它

【讨论】：

感谢您的回答，但我不想下载此文件，因为它与安全性非常相关，而且我不希望它始终是最新的。