Laravel9+Vue.js+Inertia下自定义Admin目录无法解析Vue组件

问题背景 #

我基于Laravel 9、Vue.js和Inertia开发项目，原本所有Vue页面文件都存放在resources/js/Pages目录下，现在想将管理员相关页面统一放到resources/js/Pages/Admin目录中。

已做的配置：

1. 初始app.js代码：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import './bootstrap';
import '../css/app.css'; 

createInertiaApp({
  resolve: name =>
   import(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

2. 创建了resources/js/Pages/Admin/Admin_login.vue文件：

<template>
    <h1>Admin Page</h1>
</template>

3. 在web.php中添加路由：

Route::get('/Admin_Login', function () {
    return Inertia::render('Admin/Admin_login');
});

尝试修改app.js逻辑后仍无法访问页面，修改后的代码：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import './bootstrap';
import '../css/app.css'; 

createInertiaApp({
  resolve: (name) => {
    if (name.startsWith('Admin_')) {
      const adminName = name.replace(/^Admin_/, 'Admin/');
      return import(`./Pages/${adminName}.vue`);
    }

    return import(`./Pages/${name}.vue`);
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
});

问题原因及解决方案 #

核心问题 #

你修改后的resolve函数逻辑错误：路由中传入的页面名称是Admin/Admin_login，但判断条件是name.startsWith('Admin_')（以下划线开头），实际传入的名称包含斜杠，导致判断逻辑永远不触发，无法正确找到文件路径。

正确配置 #

Inertia本身支持通过斜杠分隔路径，不需要额外的字符串替换逻辑，直接使用初始的resolve逻辑即可。当传入Admin/Admin_login时，import(./Pages/${name}.vue)会自动解析为./Pages/Admin/Admin_login.vue，完全匹配你的文件位置。

恢复后的app.js代码：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import './bootstrap';
import '../css/app.css'; 

createInertiaApp({
  resolve: name => import(`./Pages/${name}.vue`),
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el)
  },
})

额外检查项 #

1. 确认文件路径和名称完全匹配（Linux环境下区分大小写）：resources/js/Pages/Admin/Admin_login.vue
2. 修改app.js后重新编译前端资源：运行npm run dev或npm run build
3. 清除浏览器缓存，或使用Ctrl+F5硬刷新页面

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