Question

我正在使用Webpack和VueJs 2.我想在我的组件中使用第三方javascript库，例如：

<script async defer src="https://apis.google.com/js/api.js" ... ></script>

我找到了一篇关于如何为npm包执行此操作的文章here，但这对我不起作用，因为这个库不能用作npm包。

我无法在本地下载文件并使用它，因为库可能会更改并停止工作。因此，每次浏览器加载页面时都必须从链接加载。

我找到了一个可能的解决方案here，但这基本上是一个hack（在加载文档后修改dom以添加script元素）

我认为这个问题必须有一个简单的良好实践解决方案，因为我认为这是一个常见的用例。

更新如果我将脚本放在我的索引文件中的head标签内，那么它将被加载到所有组件中。出于性能原因，我希望只为某个组件加载它。

Answer 1

据我所知，除了动态地将script标记添加到页面的头部之外，您无法使用更好的方法。但是，您可以创建一个小插件来为您处理，并仅在您想要的组件中触发脚本加载，只需一次。

让我们从插件本身开始：

import Vue from 'vue'

const scriptLoader = {
    loaded: [],
    load (src) {
        if (this.loaded.indexOf(src) !== -1) {
            return
        }

        this.loaded.push(src)

        if (document) {
            const script = document.createElement('script')
            script.setAttribute('src', src)
            document.head.appendChild(script)
        }
    }
}

Vue.use({
    install () {
        Vue.prototype.$scriptLoader = scriptLoader
    }
})

正如您所看到的，您创建了一个对象scriptLoader，其中包含某种缓存对象loaded，它将记住您在应用程序中某个时刻加载的脚本。它还包含一个load()方法，可以处理将脚本添加到您的脑海中。

条件if (document)用于服务器端呈现您的应用，document将不存在。

然后，您可以使用created挂钩

在创建时将脚本加载到任何组件中

export default {
    ...
    created () {
        this.$scriptLoader.load('https://apis.google.com/js/api.js')
    }
}

这是我处理这种脚本时最干净的方式......我希望这可以帮助......

Answer 2

好的，找到了满足所有要求的解决方案。

脚本从网上下载，不需要npm包
脚本仅在某些情况下加载需要时的组件
没有丑陋的dom操纵

使用v-if指令

在index.html中添加脚本

<script v-if="loadGoogleAPI" async defer src="https://apis.google.com/js/api.js" ... ></script>

在组件文件（.vue）内，如果要加载脚本，请将标志设置为true：

<script>
export default {
  ...
  loadGoogleAPI: true,
  data() {
  ...
  }
};
</script>

在Vue组件中使用第三方Javascript库

2 个答案: