我正在使用Webpack和VueJs 2.我想在我的组件中使用第三方javascript库,例如:
<script async defer src="https://apis.google.com/js/api.js" ... ></script>
我找到了一篇关于如何为npm包执行此操作的文章here,但这对我不起作用,因为这个库不能用作npm包。
我无法在本地下载文件并使用它,因为库可能会更改并停止工作。因此,每次浏览器加载页面时都必须从链接加载。
我找到了一个可能的解决方案here,但这基本上是一个hack(在加载文档后修改dom以添加script
元素)
我认为这个问题必须有一个简单的良好实践解决方案,因为我认为这是一个常见的用例。
更新 如果我将脚本放在我的索引文件中的head标签内,那么它将被加载到所有组件中。出于性能原因,我希望只为某个组件加载它。
答案 0 :(得分: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')
}
}
这是我处理这种脚本时最干净的方式......我希望这可以帮助......
答案 1 :(得分:1)
好的,找到了满足所有要求的解决方案。
使用v-if
指令
<script v-if="loadGoogleAPI" async defer src="https://apis.google.com/js/api.js" ... ></script>
在组件文件(.vue
)内,如果要加载脚本,请将标志设置为true
:
<script>
export default {
...
loadGoogleAPI: true,
data() {
...
}
};
</script>