Question

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

让我解释一下：

我正在尝试使用一个名为Annotorious的JavaScript图像批注库，并且Annotorious docs声明要使用该插件，如下所示：

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

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

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

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)

有人在我的代码中发现任何东西吗？如何使它工作？我会抛出一个codeandbox，但是他们的Nuxt启动器坏了。谢谢您的帮助！

Answer 1

似乎Annotorious不是不是 Vue插件，所以不，您不应该使用Vue.use(Annotorious)。

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

尝试仅在您的组件中导入Annotorious并使用它。如果该库使用服务器上未定义的函数对象，也可以导入mounted钩子。

Answer 2

我只是快速建立了一个新的nuxt项目，而简单的方法https://3v4l.org/UBd8o却行不通。

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

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

希望这会有所帮助！：）

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

2 个答案: