在 Vue 组件中使用 3rd 方 Javascript 库 [重复]

Question

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

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

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

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

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

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

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

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>