1

hello im using metronic template(vue js version) version 7 with vue2 and node version 16 and most of my pages are made with vuetify my problem is when i use npm run serve everything is ok and my ui structure is how it's supposed to be but when i run npm run build things get messed up like example below.

npm run build:

enter image description here

npm run serve:

enter image description here

this page code :

<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);
  }
Debug Diva
  • 26,058
  • 13
  • 70
  • 123
EprG
  • 15
  • 4
  • For me it looks like you had zoomed browser on one of the ports. – Konrad Jul 03 '22 at 15:12
  • Make sure that you are using the same screen size and a browser zoom, in dev and production mode. Also please make sure that in dev and prod mode you are using the same version which contains all code. – laurisstepanovs Jul 13 '22 at 10:43

1 Answers1

0

just add extract:false in css section on file vue.config.js

for example

  css: {
    loaderOptions: {
     ...
     ..
     .
    },
    extract:false
  },
Mohammad Foroughi
  • 1