时间戳

首页 > 解决方案 > head() 区域中的 NuxtJS 和外部库：如何从 mount() 挂钩访问脚本？

nuxt.js - head() 区域中的 NuxtJS 和外部库：如何从 mount() 挂钩访问脚本？

问题描述

想要第二双眼睛来确保我以正确的方式做这件事。我在 NuxtJS 中有一个页面，我正在加载一个外部脚本，如下所示：

文件名：_title.vue

  head() {
    return {
      title: this.photo.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: this.photo.description
        }
      ],
      script: [
        {
          src:
            'https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.1.3/dist/annotorious.min.js'
        }
      ],
      link: [
        {
          rel: 'stylesheet',
          href:
            'https://cdn.jsdelivr.net/npm/@recogito/annotorious@2.1.3/dist/annotorious.min.css'
        }
      ]
    }
  }

然后，在我mounted()的初始化脚本中，如下所示：

  mounted() {
    // Remember, mounted() is only executed on the client
    this.anno = window.Annotorious.init({
      image: this.photo.id
    })

问题：window最好的方法是这样做，以便我可以在整个页面中访问脚本吗？为此我不需要 SSR，也不需要从任何其他页面访问它。就这一_title.vue页。

谢谢！

标签： nuxt.js

解决方案

像这样嵌入脚本时，这window是唯一的选择。

我倾向于尽可能建议npm包和页面级（或组件级）导入，以避免使用window，以及减少页面的加载时间，因为脚本已经捆绑（更小+“更快”加载）。

推荐阅读