无法将 JS 库导入我的 Nuxt 项目答案

【问题标题】：Cant import JS library to my Nuxt project无法将 JS 库导入我的 Nuxt 项目
【发布时间】：2020-12-23 15:37:01
【问题描述】：

我有一个奇怪的问题。
我想在我的 nuxt 项目中使用这个悬停效果库 (https://github.com/robin-dela/hover-effect)。这是我在脚本标签中的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 不能在模块外使用 import 语句

所以我尝试将此插件添加到 plugins/hover-effect.js

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

Vue.use(hoverEffect)

然后在 nuxt.config.js

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

但没有任何效果.. 它总是错误：hoverEffect 未定义。我又尝试了 20 种方法，但都没有成功。我在普通的 Vue 项目中尝试了这种效果，它可以工作，但在 nuxt.js 中不行。有人可以帮我解决这个问题吗？

【问题讨论】：

标签： vue.js plugins import module nuxt.js

【解决方案1】：

您可以在页面的head进行配置：

页面.vue

export default {
  head() {
    return {
      script: [
        {src: '../dist/hover-effect.umd.js'}
      ]
    }
  },
...

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'),
        })
    },

【讨论】：

它不起作用，无法读取新处未定义的属性“场景”（hover-effect.umd.js:1）我不明白......但谢谢

【解决方案2】：

modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt/content
    '@nuxt/content',
    'hover-effect'
],

您是否尝试将悬停效果库添加到 nuxt.config.js 文件中的模块？我所做的只是安装软件包并将其添加到模块中，然后使用与您的脚本标签相同的代码。希望对你有所帮助！

【讨论】：