专栏首页前端知否如何在Nuxt应用程序中加载外部脚本

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

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

<link rel="stylesheet" href="https://some-website.com/stuff.css">

<div class="some-class">
  <div>Some content...</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://some-other-website.com/stuff.js"></script>

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

使用vue-meta

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

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

// nuxt.config.js OR pages/some/page.vue

export default {
  head() {
    return {
      script: [
        {
          src: "https://some-website.com/stuff.js"
        }
      ],

      link: [
        {
          rel: "stylesheet",
          href:
            "https://some-site.com/stuff.css"
        }
      ]
    }
  }
}

您可以在nuxt.config.js上直接执行此操作,也可以直接在Nuxt页面上执行(如果在nuxt.config.js内执行此操作,则更改将应用于所有页面)。

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

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

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

script: [
  {
    src: "https://some-website.com/stuff.js",
    body: true
  }
]

Vue-meta:延迟+异步

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

script: [
  {
    src: "https://some-website.com/stuff.js",
    body: true,
    async: true,
    defer: true
  }
]

这等效于<script type="text/javascript" src="https://some-website.com/stuff.js" async defer> </ script>

非vue-meta的替代方案

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

// pages/some/page.vue

export default {
  mounted() {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "https://some-website.com/stuff.js";
    document.body.appendChild(script);
  }
}

这个技巧可以做到:

  • 等待DOM加载完
  • 创建脚本元素
  • 添加到body标签内

最后

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

谢谢阅读。编码愉快!

本文分享自微信公众号 - 前端知否(qianduanzhifou),作者:QETHAN

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用React hooks处理复杂表单状态数据

    自从React hooks发布以来已经有一段时间了,我很喜欢这个特性。这个hooks把我勾上了!

    前端知否
  • ES6+好用的小技巧,让你的代码更干净,短巧,易读

    前端知否
  • Vue3 Composition API教程及示例

    Vue引入了Composition API(基于功能的API)作为当前基于Option的API的补充。该API将随Vue 3一起发布,但是现在您可以通过将Vue...

    前端知否
  • Tensorflow-配置错误记录

    其实运行pip list 可以查看安装情况。正常情况是,1 个tensorflow,1个tensorboard,1个tensorflow-estimator,保...

    riyusei
  • 如何在Debian 9上安装Linux,Apache,MariaDB,PHP(LAMP)堆栈

    “LAMP”堆栈是一组开源软件,通常安装在一起以使服务器能够托管动态网站和Web应用程序。这个术语实际上是一个缩写,代表L inux操作系统,带有A pache...

    楠宝宝
  • Sedo榜单46个.com域名上榜,magicfiber.com位居榜首

    Sedo榜单46个.com域名上榜结拍,magicfiber.com位居榜首拍得2.8万美元,超过了18万元。同时上榜的还有16个国别域名、ai....

    躲在树上的域小名
  • 加密货币的火爆,tokens.com域名已50万美元成交

    2018年1月真的太不平常了,海外高价域名的交易一波接着一波根本停不下来。从JB.com、DXB.com、“加密世界”CryptoWorld.co...

    躲在树上的域小名
  • 搞个锤子!咱们天朝的国产ROMEN!

    是的,你没看错。今天吐槽的对象包括但不限于锤子 ROM,而是,锤子ROM们-ROMEN。雷锋网有过文章讨论中国是否需要自己的操作系统。 读者几乎一边倒地认为...

    罗超频道
  • 2018-10-31 Code Review 在丁香医生前端团队的实践

    时间过得很快,转眼间 Code Review 机制在丁香医生前端团队已经运作一年多了。今年4月初时,将团队在 Code Review 方面的一些经验在丁香园前端...

    Albert陈凯
  • 使用Vue.js 和 semantic-ui 的一个简单TODO List

    这是一个完全仿照官网案例的项目, 主要为了熟悉vue.js的基本用法, 不得不说这个案例能吸收到基本的vue.js 操作.

    用户1416054

扫码关注云+社区

领取腾讯云代金券