如何将外部 JS 脚本添加到 VueJS 组件中？

Question

我必须为支付网关使用两个外部脚本。

现在两者都放在index.html文件中。

但是，我不想在一开始就加载这些文件。

仅当用户打开特定组件（使用路由器视图）时，才需要支付网关。

有办法实现这一点吗？

谢谢你。

Answer 1

使用webpack和vue loader，您可以这样做

它在创建组件之前等待外部脚本加载，因此组件中提供了全局变量等

components: {
 SomeComponent: () => {
  return new Promise((resolve, reject) => {
   let script = document.createElement('script')
   script.onload = () => {
    resolve(import(someComponent))
   }
   script.async = true
   script.src = 'https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places'
   document.head.appendChild(script)
  })
 }
},

Answer 2

我已经下载了一些HTML模板，其中包含自定义js文件和jquery。我必须将这些js附加到我的应用程序中。并继续Vue。

找到这个插件，这是通过CDN和静态文件添加外部脚本的干净方法https://www.npmjs.com/package/vue-plugin-load-script

// local files
// you have to put your scripts into the public folder. 
// that way webpack simply copy these files as it is.
Vue.loadScript("/js/jquery-2.2.4.min.js")

// cdn
Vue.loadScript("https://maps.googleapis.com/maps/api/js")

Answer 3

解决这个问题的一种简单而有效的方法是将外部脚本添加到组件的vue

<template>
   .... your HTML
</template>

<script>
  export default {
    data: () => ({
      ......data of your component
    }),
    mounted() {
      let recaptchaScript = document.createElement('script')
      recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js')
      document.head.appendChild(recaptchaScript)
    },
    methods: {
      ......methods of your component
    }
  }
</script>

来源:https://medium . com/@ lassiuosukainen/how-to-include-a-script-tag-on-a-vue-component-Fe 10940 af9e 8