Question

我在img标签上设置了mouseover和mouseleave事件：

<img @mouseover="large" @mouseleave="resize" src="/img/intro-bologna-1.jpg" alt="Bologna gallery" class="gallery__img gallery__img--1">

methods:{
        large(event){
            let siblings = this.findAllSiblings(event.target)
            siblings.forEach(sibling => sibling.style.transform = 'scale(.9)')
            event.target.style.transform = 'scale(1.2)'
        },
        resize(event){
            let siblings = this.findAllSiblings(event.target)
            siblings.forEach(sibling => sibling.style.transform = '')
            event.target.style.transform = ''
        },
        findAllSiblings(el){
            let parent = el.parentElement;
            let children = Array.from(parent.children);
            let siblings = children.filter(child => {
                return child !== el
            })
            return siblings
        }
    }

我不明白为什么但是当我运行npm run generate并检查index.html文件（我想建立一个100％静态网站）时，悬停效果不再起作用（它在开发环境中有效）< / p>

我已经检查了dist文件夹的来源，我有一个pages_index.a57c13c1cfd73bfe116e.js文件，我可以看到我写的方法

我该如何解决？感谢

Answer 1

我已经测试了您的代码，它可以正常运行。

我相信您生成的index.html中的脚本路径是错误的，因为您可能无法从域根运行它。您通往/_nuxt/等资源的路径是错误的。您应该能够通过查看控制台来验证这一点，您将看到很多这些未找到的文件：

为了在浏览器中测试生成的index.html，您可能希望使用您喜欢的任何环境将/dist/文件夹转换为vhost。为了测试您的代码，我在valet link文件夹中使用了laravel-valet和/dist/到示例域，但您也可以使用Apache vhost，上传代码以测试虚拟主机或类似内容

vue事件不起作用 - nuxtjs静态网站

1 个答案: