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

可以这样简单地完成。

  created() {
    var scripts = [
      "https://cloudfront.net/js/jquery-3.4.1.min.js",
      "js/local.js"
    ];
    scripts.forEach(script => {
      let tag = document.createElement("script");
      tag.setAttribute("src", script);
      document.head.appendChild(tag);
    });
  }

如果您尝试将外部js脚本嵌入到vue.js组件模板中，请执行以下操作：

我想像这样向我的组件添加一个外部javascript嵌入代码：

<template>
  <div>
    This is my component
    <script src="https://badge.dimensions.ai/badge.js"></script>
  </div>
<template>

Vue向我显示了此错误：

模板仅应负责将状态映射到UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析。

我解决type="application/javascript"该问题的方法是添加（请参阅此问题以了解有关js的MIME类型的更多信息）：

<script type="application/javascript" defer src="..."></script>

您可能会注意到该defer属性。如果您想了解更多，请观看Kyle的视频

您可以使用vue-loader并将组件编码在其自己的文件（单个文件组件）中。这将允许您基于组件包括脚本和CSS。

我已经下载了一些自定义js文件和jquery附带的HTML模板。我不得不将这些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")

您是否正在为vue使用Webpack入门模板之一（https://github.com/vuejs-templates/webpack）？它已经通过vue-loader（https://github.com/vuejs/vue-loader）进行了设置。如果您不使用入门模板，则必须设置webpack和vue-loader。

然后，您可以import将脚本添加到相关（单个文件）组件。在此之前，您必须export从脚本中将所需的内容添加import到组件中。

ES6进口：
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
- http://exploringjs.com/es6/ch_modules.html

〜编辑〜
您可以从这些包装进口：
- https://github.com/matfish2/vue-stripe
- https://github.com/khoanguyen96/vue-paypal-checkout