Laravel+Vue3集成Inertia报错求助：模块未找到与中间件不存在

出现的错误 #

终端Webpack编译报错 #

ERROR in ./resources/js/app.js 5:11-37
Module not found: Error: Can't resolve './Pages/${name}' in 'C:\xampp\htdocs\my-site\resources\js'
webpack compiled with 1 error

浏览器控制台Laravel报错 #

Illuminate\Contracts\Container\BindingResolutionException
Target class [App\Http\HandleInertiaRequests] does not exist.

现有配置代码 #

Welcome.vue（resources/js/Pages/Welcome.vue） #

<template>
    <h1>Hello World</h1>
</template>

<script>
export default {};
</script>

app.js（resources/js/app.js） #

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

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

webpack.mix.js #

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ])
    .version();

Kernel.php 中间件配置 #

protected $middlewareGroups = [
    'web' => [
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        // \Illuminate\Session\Middleware\AuthenticateSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\VerifyCsrfToken::class,
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        HandleInertiaRequests::class
    ],

分步修复 #

1. 解决Webpack模块找不到的问题 #

问题出在app.js的resolve函数中：ES6模板字符串必须用**反引号（）**才能解析${name}`变量，你用了单引号导致变量未被解析。修改代码如下：

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

同时确认：

• resources/js/Pages文件夹存在，且里面的文件名（如Welcome.vue）和路由中返回的页面名称完全一致（区分大小写）。

2. 解决HandleInertiaRequests中间件不存在的问题 #

你在Kernel中添加了中间件引用，但没有生成对应的文件：

1. 运行Artisan命令生成中间件：

php artisan inertia:middleware

该命令会自动创建App\Http\Middleware\HandleInertiaRequests.php文件。
2. 修正Kernel.php中的引用：

• 方式一：添加完整命名空间

  \App\Http\Middleware\HandleInertiaRequests::class
  

• 方式二：在文件顶部导入类

  use App\Http\Middleware\HandleInertiaRequests;
  

  之后保留HandleInertiaRequests::class即可。

3. 必要收尾步骤 #

• 确保依赖安装完整：

npm install @inertiajs/inertia @inertiajs/inertia-vue3

• 重新编译前端资源：

npm run dev

• 确认路由正确返回Inertia页面（routes/web.php）：

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Welcome');
});

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