如何将第三方插件导入 Nuxt 并在挂载钩子期间初始化？答案

【问题标题】：How to import third party plugin into Nuxt and initialize during mounted hook?如何将第三方插件导入 Nuxt 并在挂载钩子期间初始化？
【发布时间】：2020-10-31 04:07:37
【问题描述】：

在 Nuxt 中使用第三方插件的正确方法是什么？我查阅了 Nuxt 插件文档，但它对我不起作用。

让我解释一下：

我正在尝试使用名为 Annotorious 的 JavaScript 图像注释库和 Annotorious 文档状态来使用插件，如下所示：

import { Annotorious } from '@recogito/annotorious';

const anno = new Annotorious({ image: 'hallstatt' }); // image element or ID

我创建了一个名为annotorious.client.js 的插件并将其放在我的plugins 文件夹中：

插件/annotorious.client.js

import Vue from 'vue'
import Annotorious from '@recogito/annotorious'
Vue.use(Annotorious) <-- am I supposed to be doing it like this?

然后，在nuxt.config.js 文件中我添加了：

plugins: ['~/plugins/annotorious.client.js'].

然后，在我的 Nuxt 页面中，我尝试像这样初始化插件：

<template>
...snip...
    <img :id="photo.filename" :src="photo.url" />
...snip...
</template>

<script>
    import Annotorious from '~/plugins/annotorious.client.js'
    export default {
      data() {
        return {
          photo: {},
          anno: {}
        }
      },
      async mounted() {
        await this.getPhoto()
        this.anno = new Annotorious({ image: this.photo.filename })

注意：在常规的 Vue 应用程序（使用 Vue-Cli 构建）中，一切正常。但是，一旦我尝试使用 Nuxt，我就会遇到问题。这是一个控制台错误：

vue.runtime.esm.js?2b0e:5106 Uncaught TypeError: Cannot read property 'install' of undefined
    at Function.Vue.use (vue.runtime.esm.js?2b0e:5106)
    at eval (annotorious.client.js?8beb:3)
    at Module../plugins/annotorious.client.js (default~app.js:4509)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at eval (index.js:46)
    at Module../.nuxt/index.js (default~app.js:203)
    at __webpack_require__ (runtime.js:854)
    at fn (runtime.js:151)
    at Module.eval (client.js:49)

有人在我的代码中发现了什么吗？如何让这个工作？我会抛出一个代码框，但他们的 Nuxt 启动器坏了。感谢您的帮助！

【问题讨论】：

标签： nuxt.js

【解决方案1】：

我只是快速设置了一个新的 nuxt 项目，而简单的方法 here 只是不起作用。

所以我尝试像这样注入它：

plugins > annotorious.js

import { Annotorious } from '@recogito/annotorious';

export default (context, inject) => {
    const initAnnotorious = (id) => new Annotorious({ image: id });
    inject('initAnnotorious', initAnnotorious)
    // For Nuxt <= 2.12, also add ?
    context.$initAnnotorious = initAnnotorious
}

在你的nuxt.config.js:

plugins: [
    { src: '~/plugins/annotorious.js', mode: 'client' },
  ]

然后在你的组件中：

<template>
    <img id="hallstatt" src="https://www.howtogeek.com/wp-content/uploads/2017/03/xwpv_top-650x363.png.pagespeed.gp+jp+jw+pj+ws+js+rj+rp+rw+ri+cp+md.ic.1-Of_zmw5H.png" alt="">
</template>

<script>
export default {
  mounted() {
    var anno = this.$initAnnotorious("hallstatt");
    console.log(anno)    
  }
}
</script>

您可以阅读有关此方法的更多信息here

希望这会有所帮助！ :)

【讨论】：

哇，好用！那是我没有根据文档尝试的一件事。

【解决方案2】：

看起来 Annotorious 不是一个 Vue 插件，所以不，你不应该使用 Vue.use(Annotorious)。

你得到Uncaught TypeError: Cannot read property 'install'的原因是因为Vue试图在你传递给Vue.use的对象上调用install函数。

尝试在您的组件中导入 Annotorious 并使用它。您还可以在 mounted 挂钩中导入，以防库使用未在服务器上定义的函数对象。

【讨论】：