Vue2+Metronic7模板npm run serve正常但build后UI样式错乱

当前基于适配Node 16、Vue2的Metronic V7（Vue JS版本）模板开发，项目页面以Vuetify为基础组件库。执行npm run serve启动开发服务时，所有功能、UI结构均符合预期；执行npm run build产出生产构建包后，页面UI出现错乱。

效果对比 #

• 生产构建（npm run build）异常效果：
  
• 开发环境（npm run serve）正常效果：
  

关联代码 #

页面模板代码：

<v-app>
<v-container fluid>
  <v-row style="margin-top: -5rem" class="mb-1">
    <v-btn
      color="primary"
      @click="selectedIndex = undefined"
    >
      <v-icon>mdi-plus</v-icon>
      {{$t('BUTTONS.New')}}
    </v-btn>
  </v-row>
  <v-row style="background-color: #00695c">
    <v-tabs
        v-model="selectedIndex"
        dark
        background-color="teal darken-3"
        show-arrows
        active-class="phone-book-active-item"
        centered
        optional
    >
      <v-tabs-slider color="teal lighten-3"></v-tabs-slider>
      <v-tab
          v-for="i in phones"
          :key="i.id"
          v-text="i.name"
          @click="selected = i"
      ></v-tab>
    </v-tabs>
  </v-row>
  <v-row>
    <create
        class="mt-12" v-if="selectedIndex === undefined"
        @create="addedNewPhoneBook"
        :phones="phones"
    >
    </create>
    <update
      v-else
      v-model="phones[selectedIndex]"
      @delete="Delete"
      :phones="phones"
    >
    </update>
  </v-row>
</v-container>

自定义样式代码：

.phone-book-active-item{
    background-color: rgba(255 , 255 , 255 , 0.2);
}

该问题属于Vue2+Vuetify2项目生产构建典型异常，核心诱因有两点：

1. 模板语法错误：上述代码中<v-app>标签未正常闭合，生产构建时HTML压缩工具会对未闭合标签做容错解析，最终生成的DOM结构和开发环境存在差异。
2. CSS加载顺序错乱：开发环境样式按「Vuetify内置样式 -> 业务自定义样式」顺序热加载，自定义规则可正常覆盖组件默认样式；生产构建时CSS会做提取合并，若存在Metronic全局样式对通用类名（如.row/.container）的重写、自定义样式未指定优先级，就会出现Vuetify布局样式被覆盖、自定义激活类样式不生效的问题。

1. 补全模板中缺失的</v-app>闭合标签，排除DOM解析异常。
2. 提升自定义样式优先级，避免被内置样式覆盖，修改自定义样式代码如下：

.v-tabs .phone-book-active-item{
    background-color: rgba(255, 255, 255, 0.2) !important;
}

3. 检查项目vue.config.js配置：
   • 若开启了css.extract自定义排序规则，改回默认配置即可；
   • 若通过css.loaderOptions注入全局SCSS变量，不要额外配置important或类名前缀规则打乱样式优先级。
4. 排查Metronic模板自带的全局样式文件，对其中重写.row、.container等通用类名的规则增加作用域前缀，避免覆盖Vuetify组件渲染出的同类型DOM样式。

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