Vue.js 无法将JS库导入我的Nuxt项目

我有个奇怪的问题。
我想在我的nuxt项目中使用这个悬停效果库（）。 这是我在脚本标记中的contact.vue中包含的

import hoverEffect from 'hover-effect'

export default {
    mounted() {
        const effect = new hoverEffect({
            parent: document.querySelector('.right-section'),
            intensity: 0.3,
            image1: require('@/assets/images/1.jpg'),
            image2: require('@/assets/images/2.jpg'),
            displacementImage: require('@/assets/images/dist2.jpg'),
        })
    },
}

这种效果非常有效。。但当我刷新页面时，出现了以下错误：
SyntaxError无法在模块外部使用导入语句

所以我尝试将这个插件添加到plugins/hover effect.js中

import Vue from 'vue'
import hoverEffect from 'hover-effect'

Vue.use(hoverEffect)

plugins: [{ src: '~/plugins/hover-effect', mode: 'client' }],

然后在numxt.config.js中

import Vue from 'vue'
import hoverEffect from 'hover-effect'

Vue.use(hoverEffect)

plugins: [{ src: '~/plugins/hover-effect', mode: 'client' }],

---

但是什么都不管用。。其总是错误：未定义悬停效果。我又尝试了20种方法，但都没有成功。我在普通的Vue项目中尝试了这种效果，但在nuxt.js中没有。有人能帮我吗？

您可以在页面的

标题中配置它：

Page.vue

导出默认值{
总目（）{
返回{
脚本：[
{src:'../dist/hover effect.umd.js'}
]
}
},
...
安装的（）{
常量效果=新的悬停效果({
父项：document.querySelector（“.right section”），
强度：0.3，
image1:require（'@/assets/images/1.jpg'），
image2:require（'@/assets/images/2.jpg'），
置换图像：需要（'@/assets/images/dist2.jpg'），
})
},

模块：[
//文件：https://axios.nuxtjs.org/usage
“@nuxtjs/axios”，
//文件：https://github.com/nuxt/content
“@numxt/content”，
“悬停效应”
]，
它不工作，无法读取新的未定义属性“Scene”（hover effect.umd.js:1）的属性“Scene”。我不明白。但是谢谢