前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在Nuxt应用程序中加载外部脚本

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

作者头像
前端知否
发布2020-03-23 18:04:32
4.9K1
发布2020-03-23 18:04:32
举报
文章被收录于专栏:前端知否

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

代码语言:javascript
复制
<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>
代码语言:javascript
复制

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

使用vue-meta

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

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

代码语言:javascript
复制
代码语言:javascript
复制
// 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即可。?

代码语言:javascript
复制
script: [
  {
    src: "https://some-website.com/stuff.js",
    body: true
  }
]
Vue-meta:延迟+异步

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

代码语言:javascript
复制
script: [
  {
    src: "https://some-website.com/stuff.js",
    body: true,
    async: true,
    defer: true
  }
]
代码语言:javascript
复制

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

非vue-meta的替代方案

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

代码语言:javascript
复制
// 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);
  }
}
代码语言:javascript
复制

这个技巧可以做到:

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

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

谢谢阅读。编码愉快!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-03-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端知否 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用vue-meta
  • Vue-meta:将脚本加载到body中
  • Vue-meta:延迟+异步
  • 非vue-meta的替代方案
  • 最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档