L'ensemble de mon application Vue est créée deux fois lors du rechargement de la page. Pourquoi cela se produit-il ?

Question

En plaçant une console.log() dans les méthodes created() et mounted() de mon composant App.vue, l'application est créée et montée deux fois à chaque rafraîchissement de page. Je me suis rendu fou en essayant de trouver la raison de ce phénomène, j'ai dépouillé mon application jusqu'à l'os et cela se produit toujours

Voici mon App.vue :

<template>
  <div id="app">
  </div>
</template>

<script>
    export default {
      name: 'app',
      mounted() {
        console.log('mounted');
      },
      created() {
        console.log('created');
      }
    }
</script>

Et voici mon main.js :

import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
import Vuetify from 'vuetify'
import { store } from './store'
import router from './router'
import App from './App.vue'
import 'vuetify/dist/vuetify.min.css'
import axios from 'axios'

Vue.use(Vuetify)
Vue.use(Vuex)
Vue.use(VueRouter)
Vue.config.productionTip = false

axios.defaults.baseURL = process.env.API_URL;

new Vue({
  el: '#app',
  render: h => h(App)
});

J'ai trouvé le problème : Ma configuration webpack pointait deux fois sur le même fichier.

Answer 1

Ma configuration webpack pointait deux fois sur le même fichier.