如何在Nuxt应用程序中加载外部脚本

最近,我不得不将第3方代码段加载到我的Nuxt应用程序中。该代码段如下所示:

我需要加载一个样式表和几个脚本。我将分享我如何使用Nuxt完成此操作以及实现此操作的不同方法。

使用vue-meta

您可以使用vue-meta的head()方法插入脚本。幸运的是,Nuxt已预装了vue-meta。

这会将脚本和样式都插入页面的头部。

上面的代码会将脚本添加到head元素。

Vue-meta:将脚本加载到body中

如果您希望将脚本添加到body中,只需添加body: true即可。

Vue-meta:延迟+异步

Vue-meta允许您添加延迟 或 异步加载的脚本。如果要使用async和defer加载它,则可以添加async: true和defer: true:

这等效于

非vue-meta的替代方案

如果您想要vue-meta的更多“手动”替代方法,则可以使用Vue的安装生命周期通过DOM vanilla JS方式插入它:

这个技巧可以做到:

等待DOM加载完

创建脚本元素

添加到body标签内

最后

有时,您必须在不使用npm的情况下加载第三方库。幸运的是,Nuxt提供了一种使用vue-meta的简便方法。另外,还可以使用Vue的mounted生命周期方法修改DOM以便自己插入。后者适用于vanilla(原生)Javascript。

谢谢阅读。编码愉快!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200306A072V500?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券