Laravel Vue项目添加路由失败：登录注册页面无法显示

错误信息 #

执行npm run watch时触发如下错误：

"default" is not exported by "node_modules/vue/dist/vue.esm-bundler.js", imported by "resources/js/app.js".

现有代码 #

resources/js/app.js #

import './bootstrap';
window.Vue = require('vue');
import Vue from 'vue';
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// Router imported
import{ routes} from './routes';

const router = VueRouter.createRouter({
mode: "history",
routes, // short for `routes: routes`
  
})

const app = new Vue({
el: '#app',
router
}) 

resources/js/routes.js #

let login = require('./components/auth/login.vue').default;
let register = require('./components/auth/register.vue').default;


export const routes = [
    { path: '/', component: login, name: '/' },
    { path: '/register', component: register, name:'register' }
]

页面结构 #

已在body标签后添加：

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

问题分析与修复方案 #

核心问题 #

你的代码混用了Vue 2和Vue 3的语法：createRouter是VueRouter 4（对应Vue 3）的API，但初始化应用却用了Vue 2的new Vue({el: '#app'})方式，同时Vue 3已不再默认导出Vue对象，这直接导致了报错。

修复步骤 #

1. 对齐依赖版本

先确保安装的Vue与VueRouter版本匹配：

• 若用Vue 3，安装对应依赖：

  npm install vue@latest vue-router@latest
  

• 若坚持用Vue 2，安装对应依赖：

  npm install vue@^2 vue-router@^3
  

以下方案以Vue 3 + VueRouter 4（当前主流组合）为例：

2. 重构resources/js/app.js

Vue 3使用createApp初始化应用，路由创建方式也有调整：

import './bootstrap';
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import { routes } from './routes';

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 替代Vue 2的mode: "history"
  routes
});

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

3. 优化resources/js/routes.js

改用ES模块import语法，且无需额外加.default（单文件组件默认导出时）：

import Login from './components/auth/login.vue';
import Register from './components/auth/register.vue';

export const routes = [
  { path: '/', component: Login, name: 'login' }, // 建议给路由起有意义的名称
  { path: '/register', component: Register, name:'register' }
];

4. 补全Laravel后端路由

在routes/web.php添加通配路由，确保前端路由能正确匹配：

Route::get('/{any}', function () {
    return view('welcome'); // 替换为你的入口视图文件名
})->where('any', '.*');

5. 重新构建

修改完成后重新执行命令：

npm run watch

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