hola, estoy usando la plantilla metronic (versión vue js) versión 7 con vue2 y node versión 16 y la mayoría de mis páginas están hechas con vuetify mi problema es cuando uso npm run serve todo está bien y mi estructura de ui es como se supone que debe ser pero cuando ejecuto npm run build, las cosas se desordenan como el ejemplo a continuación.

npm ejecutar compilación:

npm ejecutar servir:

este código de página:

 <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); }