Vue3+Vite报错：Uncaught SyntaxError模块未提供default导出

运行项目时出现报错：Uncaught SyntaxError: 请求的模块'/src/router/index.js'未提供名为'default'的导出，报错位置在main.js。

相关代码片段：

// main.js
import { createApp } from 'vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

// router/index.js
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import Shops from '../views/Shops.vue';
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes: [
    { path: '/', name: 'Home', component: Home },
    { path: '/shops', name: 'Shops', component: Shops },
  ],
});

export default router;

适配Vue3的Vue Router 4版本采用命名导出机制，模块并未提供默认导出的VueRouter对象。你的router/index.js中使用import VueRouter from 'vue-router'尝试导入默认导出，会导致VueRouter变量为undefined，后续执行VueRouter.createRouter时触发运行时错误，使得整个路由模块无法正常完成导出流程，最终main.js导入路由时就会提示找不到default导出。

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