最近碰到个闹心的问题：每次刷新页面，我的Vue应用里的created()和mounted()钩子都会触发两次。哪怕把项目精简到最基础的结构，这个奇怪的现象还是没消失。

我精简后的代码如下： #

App.vue

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

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

排查过程 #

一开始我怀疑是组件嵌套、路由配置或者第三方库的问题，于是一步步砍掉非必要的代码：去掉了路由、Vuex的引入，甚至把App.vue的模板改成空的，但刷新后控制台依然会输出两次created和mounted。

最终解决方案 #

折腾了好一阵才发现问题所在——我的Webpack配置文件里重复配置了同一个入口文件，导致Vue应用被初始化了两次，自然钩子函数就执行了两遍。修正Webpack的入口配置后，问题就彻底解决了。

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