Vue.js事件侦听器在Netlify上不起作用，但在localhost上起作用

我曾在Nelify论坛上问过类似的问题，但我没有通过部署在netlify上的vue静态网站解决问题

在localhost上，每个事件侦听器都按预期工作，但似乎在Netlify上不再使用时，我的事件侦听器都无法工作。简单地说，单击时必须执行的函数在假定的情况下永远不会执行

在下面的代码中，我有一个组件，它包含一个联系人按钮，我在该按钮上附加了一个普通的v-on:click事件监听器，为了进行测试，它应该触发控制台日志和带有消息的警报。在我的机器上，在localhost上，它完全按照预期工作：当我单击联系人按钮时，警报框显示相应的消息，并将消息打印到控制台

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

这是一个包含vue click事件侦听器的组件的src，它与其他组件一样，在netlify上托管网站时，无法对click-on做出反应：

从“Vue”导入Vue；
从“vue属性装饰器”导入{Component}；
从“@/components/ButtonContact.vue”导入ButtonContact；
@组成部分({
组成部分：{
按钮接触
}
})
导出默认类HomePageHero部分扩展Vue{
contactOnClick（）{
控制台日志（“接触按钮测试”）；
警报（'将您重定向到联系人部分…'）；
}
} 
$英雄节高度：计算（100vh-#{$收割台高度}）；
#包装主页英雄部分{
页边顶部：$页眉高度；
高度：$英雄截面高度；
宽度：100%；
显示器：flex；
>a{
利润上限：-10vh；
}
>img{
位置：绝对位置；
顶部：3.5vh；
z指数：99；
高度：87.5vh；
宽度：24vw；
@介质和全部（最大宽度：1310px）{
显示：无；
}
}
>文章{
@介质和全部（最大宽度：1310px）{
左边距：8vw；
}
@全部和全部介质（最大宽度：570px）{
利润上限：7.5vh；
}
左边距：30vw；
边际上限：11vh；
>h1，>h2{
宽度：740px；
@介质和全部（最大宽度：960像素）{
宽度：500px；
}
@全部和全部介质（最大宽度：570px）{
宽度：330px；
}
@介质和全部（最大宽度：350px）{
宽度：285px；
}
}
>h1{
字体大小：5.5rem；
字号：100；
@介质和全部（最大宽度：960像素）{
字号：4rem；
}
@全部和全部介质（最大宽度：570px）{
字体大小：3rem；
}
@介质和全部（最大宽度：350px）{
字号：2rem；
}
}
>氢{
字号：100；
利润上限：3.5vh；
字体大小：1.05rem；
线高：2.75雷姆；
@介质和全部（最大宽度：960像素）{
字体大小：0.86rem；
}
@全部和全部介质（最大宽度：570px）{
字体大小：0.69rem；
}
@介质和全部（最大宽度：350px）{
字体大小：0.57rem；
}
}
}
.按钮触点{
边际上限：6vh；
背景：无；
边界：无；
大纲：无；
}
}
@介质和全部（最大宽度：1699px）{
h1{
字体大小：2.33rem；
}
}
@介质和全部（最大宽度：480px）{
#包装主页英雄部分{
>img{
显示：无；
}
>文章{
左边距：0vw；
边缘顶部：13vh；
>h1，>h2{
宽度：92vw；
}
>h1{
字体大小：3rem；
字号：100；
}
>氢{
字号：100；
利润上限：2.5vh；
字体大小：0.75rem；
线高：2.15雷姆；
}
}
}
} 

<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>