Laravel项目Vue挂载组件报Failed to load resource 404错误

故障根因 #

• 前端请求路径错误：Vue组件内axios写的是相对路径，当前访问的电影详情页路径是/movies/{id}，相对路径会自动拼接当前路径前缀，最终请求地址变成/movies/comment/store、/movies/getComments/{id}，和你定义在根路径下的路由规则完全不匹配。
• 路由写法不兼容版本：你写的Route::post('/comment/store','CommentController@store')是Laravel 6及更早版本的写法，Laravel 8+取消了默认的控制器命名空间全局前缀，就算请求路径正确，也会找不到控制器类。

修复步骤 #

1. 修正路由配置 #

打开routes/web.php，把两条评论路由改成和项目内其他路由一致的数组写法，指定完整控制器类名：

// 替换原有的两条评论路由
Route::post('/comment/store', [App\Http\Controllers\CommentController::class, 'store']);
Route::get('/getComments/{movie}', [App\Http\Controllers\CommentController::class, 'getComments']);

额外注意：检查控制器文件名，你当前的控制器文件名写的是Commentcontroller.php，Linux环境大小写敏感，必须改成和类名完全一致的CommentController.php，否则会报类找不到错误。
改完后执行命令清除路由缓存：

php artisan route:clear

2. 修正Vue组件请求路径 #

所有axios请求路径前加/，表示从站点根目录发起请求，彻底避免相对路径拼接错误：

• 打开CommentComponent.vue，修改提交评论的post请求：

// 原代码 axios.post('comment/store',this.formData)
axios.post('/comment/store',this.formData)

• 打开GetCommentsComponent.vue，修改获取评论的get请求：

// 原代码 axios.get('getComments/'+this.movieid)
axios.get('/getComments/'+this.movieid)

额外bug修复：CommentComponent.vue里的textarea标签多写了冒号，错误写法是:v-model="formData.comment"，v-model本身是Vue内置指令不需要加冒号绑定，改成v-model="formData.comment"即可，否则双向绑定失效，提交的评论内容永远为空。

3. 修正评论提交逻辑 #

当前评论插入的写法有问题，insert()是查询构造器方法，不会自动维护created_at、updated_at时间戳，也不会触发模型事件，修改CommentController.php的store方法：

public function store(Request $request)
{
    // 加基础参数校验，避免非法请求
    $request->validate([
        'movie_id' => 'required|exists:movies,id',
        'comment' => 'required|string'
    ]);
    $comment = Comment::create([
        'movie_id' => $request->movie_id,
        'user_id' => auth()->id(), // 直接从登录态取用户ID更安全，不要依赖前端传值
        'comment' => $request->comment,
    ]);

    return response()->json($comment->load('user'));
}

同时打开Comment.php模型，添加批量赋值白名单，否则会报Mass Assignment批量赋值错误：

protected $fillable = ['movie_id', 'user_id', 'comment'];

4. 可选性能优化 #

你当前写的500毫秒轮询刷新评论列表频率太高，会给服务器造成不必要的压力，建议要么把轮询间隔调整到3000毫秒以上，要么改成评论提交成功后再主动调用getComments()方法刷新列表，不需要持续轮询。

最后重新编译前端资源：

npm run dev

刷新页面即可解决两个404报错。

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