在 Vue 组件中使用 3rd 方 Javascript 库

Question

我正在使用 Webpack 和 VueJs 2。我想在我的组件中使用 3rd 方 javascript 库，例如：

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

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

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

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

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

更新： 如果我将脚本放在索引文件中的 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>