NuxtJS和head()区域中的外部库:如何从挂载()钩子访问脚本？

Question

我想要第二双眼睛来确保我这样做是正确的。我在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为这个，我不需要访问它从任何其他网页。只有这个页面.

谢谢!

Answer 1

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

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