VueRouter配置报错：vue__WEBPACK_IMPORTED_MODULE_0__.default不是构造函数

核心原因 #

这个错误是因为Vue3不再通过new Vue()实例化应用，它的默认导出已不是构造函数，而是提供createApp等API创建应用实例。你的代码大概率沿用了Vue2的写法，导致webpack找不到对应构造函数；错误行号显示为空行是因为webpack编译行号和原文件行号存在偏移，重点检查应用实例化的代码段即可。

修正方案 #

1. 改写main.js为Vue3规范写法 #

替换现有main.js内容，使用Vue3 + VueRouter4的正确API：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import MyApp2 from './MyApp2.vue'

// 定义路由规则，根据你的组件路径调整
const routes = [
  { path: '/', component: () => import('./components/Home.vue') },
  // 其他路由配置...
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(),
  routes
})

// 创建应用并挂载路由
const app = createApp(MyApp2)
app.use(router)
app.mount('#app')

2. 检查根组件(MyApp2.vue) #

确保根组件中包含<router-view>标签，否则路由匹配的组件无法渲染：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script setup>
// 根组件逻辑代码
</script>

3. 重新启动项目 #

可选清理依赖后重新安装运行：

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

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