Laravel 9+Jetstream+Inertia如何渲染子目录Vue组件？

常见问题排查与解决步骤： #

1. 确认文件路径与命名规范

   • 确保组件文件路径为resources/js/Pages/Admin/Dashboard.vue，文件名和目录名的大小写要和调用时完全一致（Inertia默认用PascalCase映射文件，比如Admin/Dashboard对应Admin目录下的Dashboard.vue）。
   • 组件内部无需额外命名空间，正常导出即可：

     <script setup>
     // 组件逻辑代码
     </script>
     
     <template>
       <!-- 组件模板 -->
     </template>
     

2. 检查Inertia的页面解析配置

   • 打开resources/js/app.js，查看Inertia的resolve函数：
     • 如果是用Vite（Jetstream默认配置），确保resolve函数能正确匹配子目录文件：

       createInertiaApp({
         resolve: name => {
           const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
           return pages[`./Pages/${name}.vue`]
         },
         // 其他配置...
       })
       

       这个写法会通过import.meta.glob匹配Pages下所有子目录的.vue文件，自动映射Admin/Dashboard到./Pages/Admin/Dashboard.vue。
     • 如果是用Webpack，确保resolve函数是：

       resolve: name => require(`./Pages/${name}`),
       

3. 重新构建前端资源

   • 执行npm run dev（开发环境）或npm run build（生产环境），清除前端缓存，确保新的目录结构被正确打包。
   • 同时可以清除Laravel端缓存：

     php artisan cache:clear
     php artisan view:clear
     

4. 验证控制器调用

   • 确保控制器里的调用没有拼写错误：

     public function showAdminDashboard()
     {
         return Inertia::render('Admin/Dashboard');
     }
     

     注意Admin/Dashboard的大小写要和目录、文件名完全对应。

总结 #

绝大多数情况是文件路径/大小写不匹配或者前端资源未重新构建导致的，按照上面的步骤逐一排查就能解决问题。

内容的提问来源于stack exchange，提问作者MD. Arif Ahmed