Vue2+Vuetify2的v-hover组件在Vercel生产环境失效问题

问题说明 #

基于Vue 2和Vuetify 2开发的项目中，v-hover组件在本地开发环境能正常触发hover交互，但部署到Vercel生产环境后，hover效果完全失效。核心代码片段如下：

<v-hover
      v-slot="{ hover }"
      v-for="card in cards"
      :key="card.id"
      class="work-cards"
      :style="$vuetify.breakpoint.xs ? 'place-items: center;' : ''"
    >
      <v-card
        data-aos="fade-up"
        class="d-flex content-card elevation-0 mb-2"
        @click="openWork(card)"
      >
        <div
          :class="['img-container rounded-lg', { 'zoom-img': hover }]"
          :style="{
            backgroundImage: `url(${card.img})`,
          }"
        >
          <div
            :class="['container-info', { 'opacity-info': !hover }]"
            style="min-height: 250px"
          >
            <div class="d-flex mb-1">
              <p
                class="card-year font-weight-black grey--text text--lighten-3 mb-0 mx-2"
              >
                {{ card.year }}
              </p>
              <p class="card-title font-weight-black white--text mb-0">
                {{ card.shortTitle }}
              </p>
            </div>

            <div class="d-flex">
              <v-chip
                small
                v-for="chip in card.tech"
                :key="chip.id"
                :text-color="chip.color"
                class="ml-2"
                :color="chip.background"
                >{{ chip.name }}</v-chip
              >
            </div>
          </div>
        </div>
      </v-card>
    </v-hover>

预期效果为：鼠标悬停卡片时，图片触发缩放动画，信息区域透明度变化。

排查与解决方法 #

1. 生产环境CSS树摇导致样式丢失 #

Vercel默认的生产环境CSS优化可能误删了v-hover依赖的核心样式，或是自定义的zoom-img、opacity-info类被标记为无用样式移除。

• 修复步骤：
  • 在vue.config.js中添加配置，避免CSS树摇误删关键类：

    module.exports = {
      css: {
        extract: {
          ignoreOrder: true
        }
      }
    }
    

  • 给hover相关的自定义CSS类添加注释，标记为不可树摇的关键样式：

    /* webpackChunkName: "hover-styles" */
    .zoom-img {
      transform: scale(1.05);
      transition: transform 0.3s ease;
    }
    
    /* webpackChunkName: "hover-styles" */
    .opacity-info {
      opacity: 0.7;
      transition: opacity 0.3s ease;
    }
    

2. Vue生产编译配置干扰指令 #

生产环境编译时，部分压缩或优化选项可能导致Vuetify的v-hover指令失效。

• 修复步骤：
  • 检查vue.config.js，关闭不必要的生产源映射：

    module.exports = {
      productionSourceMap: false
    }
    

  • 确保Vuetify在main.js中正确引入并初始化：

    import Vue from 'vue'
    import Vuetify from 'vuetify/lib'
    import 'vuetify/dist/vuetify.min.css'
    
    Vue.use(Vuetify)
    
    new Vue({
      vuetify: new Vuetify(),
      render: h => h(App)
    }).$mount('#app')
    

3. 元素层级或事件拦截问题 #

生产环境中可能存在元素覆盖v-hover容器，或容器被设置了pointer-events: none，导致鼠标事件无法触发。

• 修复步骤：
  • 给v-hover的work-cards类添加样式，确保能接收鼠标事件：

    .work-cards {
      pointer-events: auto;
    }
    

  • 检查v-card及内部元素是否设置了pointer-events: none，如有则移除该样式。

4. AOS动画与v-hover冲突 #

代码中使用的data-aos="fade-up"动画，可能在生产环境中干扰了v-hover的事件监听逻辑。

• 修复步骤：
  • 临时移除data-aos属性测试hover效果，若恢复则调整AOS初始化时机，确保动画完成后再启用hover交互；
  • 或给AOS动画添加样式，仅在动画期间禁用指针事件：

    [data-aos] {
      pointer-events: none;
    }
    [data-aos].aos-animate {
      pointer-events: auto;
    }
    

内容的提问来源于stack exchange，提问作者melvswrld