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

JavaScript

逆天TomHarry

2020-03-10

我必须为支付网关使用两个外部脚本。现在，两者都放入index.html文件中。但是，我不想在一开始就加载这些文件。仅在用户打开特定组件（using router-view）时才需要支付网关。

反正有实现这个目标的方法吗？

第407篇《如何将外部JS脚本添加到VueJS组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共5个回答

伽罗Mandy 2020.03.10

可以这样简单地完成。

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

小胖MandyGil 2020.03.10

如果您尝试将外部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的视频

神无JimEva 2020.03.10

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

Mandy小卤蛋凯 2020.03.10

我已经下载了一些自定义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")

古一村村Gil 2020.03.10

您是否正在为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