Laravel9+Vue3集成vue-router4时出现导出错误求助

你遇到的报错核心原因是Vue Router 4不再提供默认导出，你当前用的默认导入写法不符合它的ES模块规范，直接按以下步骤修改代码即可解决：

1. 修正resources/js/app.js的导入语句 #

把默认导入改成命名导入，直接引入需要的Router方法：

// 替换原错误导入行
// import VueRouter from 'vue-router';
// 改为命名导入
import { createRouter, createWebHashHistory } from 'vue-router';

2. 调整Router实例的创建代码 #

因为已经直接导入了目标方法，无需再通过VueRouter前缀调用：

// 替换原Router实例创建代码
const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

修改后的完整app.js代码 #

import './bootstrap';
import { createApp } from 'vue';
const app = createApp({})

import App from './App.vue';
import VueAxios from 'vue-axios';
import { createRouter, createWebHashHistory } from 'vue-router';
import axios from 'axios';
import { routes } from './routes';

const router = createRouter({
    history: createWebHashHistory(),
    routes,
})

app.use(router)
app.use(VueAxios, axios) // 补充：这里需要传入axios，否则vue-axios无法正常工作

app.mount('#app')

补充说明 #

从你的package.json可见，Vue Router版本为4.1.6，和Vue 3完全兼容，但该版本采用纯ES模块设计，所有API必须通过命名导入获取，不再支持Vue 2时代import VueRouter from 'vue-router'的默认导入方式。

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