Laravel 9 + Vite + Vue CLI 3 vue-router报错求助

从错误截图可看到核心报错为 Uncaught TypeError: Cannot read properties of undefined (reading 'use')，结合你的环境，以下是针对性排查步骤：

• 检查 vue-router 与 Vue 版本兼容性

  • Vue 3 必须搭配 vue-router@4.x，Vue 2 对应 vue-router@3.x。Laravel 9 集成 Vite 默认是 Vue 3 环境，但你同时使用 Vue CLI 3（默认适配 Vue 2），极易出现版本混装冲突。
  • 执行命令查看当前依赖版本：

    npm list vue vue-router
    

  • 若版本不匹配，卸载后重新安装对应版本：
    适配Vue3（Laravel9+Vite默认环境） #

    npm uninstall vue-router
    npm install vue-router@4
    

    若项目基于Vue2开发 #

    npm uninstall vue-router
    npm install vue-router@3
    

• 修正 vue-router 导入与初始化代码

  • Vue 3 和 Vue 2 的 vue-router 初始化逻辑完全不同，禁止混用写法：
    Vue3 + vue-router@4 正确写法（main.js/ts） #

    import { createApp } from 'vue'
    import { createRouter, createWebHistory } from 'vue-router'
    import App from './App.vue'
    import routes from './routes'
    
    const router = createRouter({
      history: createWebHistory(),
      routes
    })
    
    const app = createApp(App)
    app.use(router)
    app.mount('#app')
    

  • Vue2 + vue-router@3 写法参考：

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import App from './App.vue'
    import routes from './routes'
    
    Vue.use(VueRouter)
    
    const router = new VueRouter({
      mode: 'history',
      routes
    })
    
    new Vue({
      router,
      render: h => h(App)
    }).$mount('#app')
    

• 统一构建工具，消除环境冲突

  • 同时使用 Vite 和 Vue CLI 会导致构建环境混乱，Laravel 9 推荐用 Vite 作为构建工具，建议统一环境：
    1. 删除项目根目录的 vue.config.js
    2. 确保 vite.config.js 配置正确（Laravel 9 默认已配置 Vue 支持，无需额外修改）
    3. 使用 Vite 命令启动或构建项目：

    npm run dev # 开发环境启动
    npm run build # 生产环境构建
    

• 清理依赖缓存并重装

  • 依赖缓存可能引发版本异常，执行以下命令重置依赖：

    rm -rf node_modules package-lock.json
    npm install
    npm run dev
    

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