Vue.js事件监听器无法在Netlify上运行，但可以在本地主机上运行

Question

我在Nelify论坛上提出了类似的问题，但是我没有设法通过部署在netlify上的vue静态网站来解决该问题。

在localhost上，每个事件侦听器均按预期工作，但是似乎在Netlify上部署时，我的事件侦听器均不起作用。简而言之，必须按一下就不会执行必须在单击时执行的功能。

在下面的代码中，我有一个组件，其中装有一个接触按钮，在该按钮上附加了一个普通的v-on：click事件侦听器，为了进行测试，该组件应该同时触发控制台日志和警报一条消息。在我的机器上的localhost上，它按预期的方式工作：当我单击“联系人”按钮时，出现警告框，其中包含相应的消息，并且消息已打印到控制台。

尽管如此，我还是非常困惑，当我在netlify上部署网站时，单击按钮绝对没有任何作用。没有弹出警报框，控制台中没有消息。再说一次，在localhost上一切正常。

因此，这是持有vue click事件侦听器的组件之一的src，就像所有其他组件一样，将其托管在netlify上时无法对click做出反应：

<template>
<section id='wrapper-the-home-page-hero-section' class='main-section'>
    <a name="home" class="a--redirect"></a>
    <img src="../assets/images/business-building.jpg" alt="">
    <article>
        <button class="button-contact" v-on:click.prevent="contactOnClick">
            <ButtonContact  />
        </button>
    </article>
</section> 
</template>

<script lang='ts'>
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import ButtonContact from '@/components/ButtonContact.vue';


@Component({
    components: {
        ButtonContact
    }
})
export default class TheHomePageHeroSection extends Vue {
    contactOnClick() {
        console.log('contact button test');
        alert('redirecting you to contact section...');
    }
} </script>

<style lang='scss' scoped>
$the-hero-section-height: calc(100vh - #{$the-header-height});

#wrapper-the-home-page-hero-section {
    margin-top: $the-header-height;
    height: $the-hero-section-height;
    width: 100%;
    display: flex;

    > a {
        margin-top: -10vh;
    }

    > img {
        position: absolute;
        top: 3.5vh;
        z-index: 99;
        height: 87.5vh;
        width: 24vw;

        @media all and (max-width: 1310px) {
            display: none;
        }
    }

    > article {

        @media all and (max-width: 1310px) {
             margin-left: 8vw;
        }
        @media all and (max-width: 570px) {
             margin-top: 7.5vh;
        }
        margin-left: 30vw;
        margin-top: 11vh;

        > h1, > h2 {
            width: 740px;
            @media all and (max-width: 960px) {
                width: 500px;
            }

            @media all and (max-width: 570px) {
                width: 330px;
            }

            @media all and (max-width: 350px) {
                width: 285px;
            }
        }

        > h1 {
            font-size: 5.5rem;
            font-weight: 100;
             @media all and (max-width: 960px){
                font-size: 4rem;
            }
            @media all and (max-width: 570px) {
                font-size: 3rem;
            }
            @media all and (max-width: 350px) {
                font-size: 2rem;
            }
        }

        > h2 {
            font-weight: 100;
            margin-top: 3.5vh;
            font-size: 1.05rem;
            line-height: 2.75rem;
            @media all and (max-width: 960px) {
                font-size: 0.86rem;
            }
            @media all and (max-width: 570px) {
                font-size: 0.69rem;
            }
            @media all and (max-width: 350px) {
                font-size: 0.57rem;
            }
        }
    }

    .button-contact {
        margin-top: 6vh;
        background: none;
        border: none;
        outline: none;
    }
}

@media all and (max-width: 1699px) {
    h1 {
        font-size: 2.33rem;
    }
}

@media all and (max-width:  480px) {
    #wrapper-the-home-page-hero-section {
        > img {
            display: none;
        }

        > article {
            margin-left: 0vw;
            margin-top: 13vh;

            > h1, > h2 {
                width: 92vw;
            }

            > h1 {
                font-size: 3rem;
                font-weight: 100;
            }

            > h2 {
                font-weight: 100;
                margin-top: 2.5vh;
                font-size: 0.75rem;
                line-height: 2.15rem;
            }
        }
    }
} </style>