Vue3配置路由后页面空白 报错找不到vue-router的createRouter、createWebHistory

你遇到的所有报错、页面白屏问题，核心根因为安装的vue-router版本与Vue3项目不匹配：

• createRouter、createWebHistory 是vue-router 4.x版本专属的导出API，仅支持搭配Vue3使用
• 如果当前环境安装的是适配Vue2的vue-router 3.x版本，这两个方法根本不存在，才会触发控制台的导出缺失警告，连带出现Uncaught TypeError: Object(...) is not a function运行时错误，最终导致路由实例初始化失败，路由流程完全中断，页面无任何内容渲染。

• 先检查当前环境的vue-router版本
  在项目根目录执行依赖检查命令：
  npm ls vue-router
  只要输出的版本主版本号为3.x，就确定是版本不匹配问题。
• 安装适配Vue3的vue-router 4.x版本
  根据使用的包管理器执行对应安装命令：
  • npm 环境：npm install vue-router@4
  • yarn 环境：yarn add vue-router@4
  • pnpm 环境：pnpm add vue-router@4
• 校验路由的全局挂载逻辑
  vue-router 4.x 不再兼容Vue2 时代的Vue.use()挂载写法，需要确认项目入口文件（一般为src/main.js）的挂载逻辑符合Vue3规范，示例正确写法：

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router/index.js'
  
  const app = createApp(App)
  // 路由实例通过app.use方法挂载，而非Vue.use
  app.use(router)
  app.mount('#app')
  

• 排查其他容易导致白屏的关联问题
  • 确认App.vue中存在路由出口标签<router-view />，缺少出口的话路由匹配到的组件无法渲染
  • 确认路由配置里所有引用的组件（createUser、listUser、showUser等）都已在router/index.js顶部正确导入，无漏导错导问题
  • 确认路由守卫中依赖的firebase已经完成初始化，避免守卫执行过程中断流路由跳转流程

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