如何在现有Laravel-Vue项目中集成Vue Router？

我有一个Laravel-Vue项目，安装Vue Router时遇到了路径适配问题：

1. 先执行命令安装vue-cli-service：
   npm install --save-dev @vue/cli-service
2. 接着运行vue add router，该命令会在项目根目录生成src文件夹，包含views、main.js、App.vue、router.js等初始化文件。

但我的前端文件都存放在Laravel默认的resources文件夹中（包含mixin、bootstrap及Laravel视图文件夹），尝试修改导入配置和webpack mix配置均未解决问题。想请教：如何让Vue Router插件指向resources/js文件夹，或者修改webpack mix配置使其指向生成的src文件夹？

解决方案（适用于Laravel 8+、Vue.js 3） #

放弃之前的vue-cli插件安装方式，改用手动安装配置：

1. 安装对应版本的Vue Router #

执行命令安装适配Vue 3的Vue Router 4：
npm install vue-router@4

2. 在resources/js/app.js中配置路由 #

打开resources/js/app.js，添加路由配置代码：

import * as VueRouter from 'vue-router'
// 记得先导入你要使用的组件，比如Home组件
// import Home from './components/Home.vue'

// 定义路由规则
const routes = [
    {
        path: '/home', 
        component: Home, 
        name: 'Home'
    },
    // 可添加更多路由规则
]

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

// 挂载路由到Vue实例（确保这行代码替换原有的挂载逻辑）
createApp(App).use(router).mount('#app')

补充说明 #

• 我曾尝试将路由代码拆分到单独的router文件夹再导入，但未成功，因此暂时将配置保留在app.js中。
• 完成配置后，还需要在Vue根组件（比如App.vue）中添加<router-link>用于导航，以及<router-view>用于渲染匹配的路由组件，这部分细节可参考Vue Router官方文档，目前针对Laravel-Vue项目的专属配置资料相对较少。

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