Vue3路由创建报错求助：TypeError: Cannot read properties of undefined

报错原因分析 #

你遇到的TypeError: Cannot read properties of undefined (reading 'use')是因为Vue3与Vue2的API使用逻辑完全不同，同时路由配置存在拼写错误：

• Vue3中不存在全局Vue对象的use()和createApp()方法，正确方式是从vue包导入createApp，通过创建的应用实例调用use()。
• 路由配置对象里，路由数组的键名是routes而非routers，拼写错误会导致路由无法正常注册。
• 导入组件时缺少.vue扩展名（部分构建工具无法自动补全该扩展名）。
• 额外兼容性问题：依赖中的bootstrap-vue@2.22.0仅支持Vue2，在Vue3环境下会引发潜在冲突，建议替换为Vue3适配版本。

修正后的main.js代码 #

import 'bootstrap/dist/css/bootstrap.css'
import { createApp } from 'vue' // Vue3正确导入createApp方法
import App from './App.vue'
import { createRouter, createWebHashHistory } from 'vue-router' // Vue Router 4标准导入方式
import store from './store'
import testeRouter from './pages/testeRouter.vue' // 补全Vue组件扩展名

// 创建路由实例，注意配置项为routes而非routers
const router = createRouter({
  history: createWebHashHistory(), // Vue Router 4必须指定历史模式
  routes: [
    {
      path: '/teste-router', // 路径建议简化，避免与文件路径混淆
      component: testeRouter
    }
  ]
})

// 初始化应用并挂载
const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

额外注意事项 #

• 路由版本匹配：依赖中vue-router@4.0.3是Vue3的适配版本，请勿降级到Vue2对应的vue-router@3.x系列。
• bootstrap-vue替换：卸载旧版并安装Vue3兼容版本：

npm uninstall bootstrap-vue
npm install bootstrap-vue-next

• 组件路径规范：所有Vue组件导入时请明确带上.vue扩展名，避免构建工具解析异常。

内容的提问来源于stack exchange，提问作者João Denari