Vue 2项目卸载Font Awesome后出现Uncaught TypeError报错求助

开发Vue 2项目时，为实现样式需求安装了Font Awesome库，发现不兼容后卸载。刷新服务器后控制台出现报错：Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is undefined。此前代码运行正常，尝试恢复main.js文件后报错依旧。

相关代码 #

1. main.js #

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import VueFirestore from 'vue-firestore'
import JQuery from 'jquery'
import {BootstrapVue, IconsPlugin} from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import 'bootstrap/dist/js/bootstrap.min.js'
import './assets/app.scss'
import swal from 'sweetalert2';
// import VoerroTagsInput from '@voerro/vue-tagsinput';

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
window.$ = JQuery
Vue.use(VueFirestore, {
  key: 'id',         // the name of the property. Default is '.key'.
  enumerable: true  //  whether it is enumerable or not. Default is true.
})

Vue.use(VueFirestore)
Vue.config.productionTip = false
// Make BootstrapVue available throughout your project
// Vue.use(createPopper)

let app = '';

if(!app){
  new Vue({
    router,
    render: h => h(App)
  }).$mount("#app");
  
}

window.Swal = swal;
const Toast = Swal.mixin({
  toast: true,
  position: 'top-end',
  showConfirmButton: false,
  timer: 3000
});

window.Toast = Toast;

2. router/index.js #

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
  {
    path: '/',
    name: 'books',
    component: () => import('../components/books')
  },
]
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})
export default router

3. package.json #

{
  "name": "vue-firebase-crud",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.5.3",
    "bootstrap-vue": "^2.22.0",
    "core-js": "^3.8.3",
    "firebase": "^8.10.0",
    "jquery": "^3.6.1",
    "sweetalert2": "^11.4.37",
    "vue-firestore": "^0.3.30",
    "vue-router": "^3.6.5",
    "vue2-editor": "^2.10.3"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "node-sass": "^7.0.3",
    "sass": "^1.55.0",
    "sass-loader": "^13.1.0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

控制台报错截图 #

1. 补装Vue依赖 #

你的package.json中缺失vue依赖，这是核心问题之一。执行以下命令安装对应版本的Vue：

npm install vue@2.6.14

（版本需与vue-template-compiler保持一致）

2. 清理缓存与重新安装依赖 #

• 删除项目根目录下的node_modules文件夹、package-lock.json文件
• 执行npm install重新安装所有依赖

3. 清理Webpack缓存 #

停止开发服务器后，执行以下命令强制跳过缓存启动：

npm run serve -- --no-cache

4. 修复重复调用问题 #

删除main.js中重复的Vue.use(VueFirestore)调用，仅保留带配置的那一行：

// 移除这行重复代码
// Vue.use(VueFirestore)

5. 重启开发服务器 #

彻底关闭当前开发服务器进程，重新执行npm run serve启动项目

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