如何在Laravel项目中让vue-router排除/api/路由交由Laravel处理？

Laravel的路由匹配是按从上到下的顺序执行的，只要把/api相关的Laravel路由放在vue通配路由的前面，就能让/api开头的请求优先被Laravel路由处理，剩下的请求才会交给vue-router。

修改你的web.php代码如下：

// 先定义所有/api开头的Laravel路由
Route::prefix('api')->group(function () {
    // 这里添加你的API路由示例
    Route::get('/user', [UserController::class, 'getUser']);
    Route::post('/order', [OrderController::class, 'createOrder']);
});

// 最后放置vue的入口路由，仅处理非/api开头的请求
Route::get('/{vue_capture?}', [HomeController::class, 'index'])->where('vue_capture', '[\/\w\.-]*');

同时注意vue-router的配置细节：

• 开启history模式，避免URL带#号
• 不要在vue-router中定义任何/api开头的路由，防止和Laravel路由冲突
• 如果vue项目部署在子目录，需正确设置base属性（比如base: '/'）

这样配置后，所有/api开头的请求会被Laravel路由接管，其余请求则进入vue入口页面，由vue-router处理前端路由。

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