Laravel Jetstream使用Inertia配置路由找不到Vue文件如何解决

你遇到的报错核心是路由传入的Inertia组件路径与实际文件的存放目录结构不匹配。
控制台抛出Cannot find module './BlogList.vue'的原因是：Inertia的组件解析逻辑会按照你配置的根路径+路由传入的组件名拼接查找文件，你将BlogList.vue存放在Blog子目录下，但路由里只传了BlogList作为组件名，相当于直接去根组件目录下查找同名文件，自然匹配失败。

你可以根据自己的目录规划选择以下任意一种方案：

方案1：调整路由参数（推荐，符合默认配置规范） #

Laravel Jetstream搭配Inertia的默认组件根目录为/resources/js/Pages/，你可以先做以下调整：

• 把Blog目录移动到Pages目录下，最终文件路径为/resources/js/Pages/Blog/BlogList.vue
• 修改路由代码，加上子目录前缀：

Route::inertia('/bloglist', 'Blog/BlogList');

方案2：自定义组件解析路径（适合不想调整目录的场景） #

如果你确实需要把组件存放在/resources/js/Blog/目录下，不需要移动文件，直接修改resources/js/app.js中的Inertia resolve配置即可：
找到默认的resolve配置：

resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob('./Pages/**/*.vue'))

修改为匹配Blog目录的规则：

resolve: (name) => resolvePageComponent(`./Blog/${name}.vue`, import.meta.glob('./Blog/**/*.vue'))

修改后你原来的路由代码Route::inertia('/bloglist', 'BlogList');可直接生效。

任意方案修改完成后，重新执行前端编译命令npm run dev，刷新页面即可正常加载。

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