Laravel+Inertia+VueJS+Vite生产构建后Vite清单文件查找失败报错

问题核心原因 #

dev模式下Vite实时编译能识别源文件路径，但执行npm run build后，Vite生成的manifest.json里只记录编译后带hash的资源路径，你在blade里动态传入的resources/js/Pages/{$page['component']}.vue是源文件路径，不在manifest的映射关系里，所以生产环境会报错。

正确解决方案 #

1. 修正app.blade.php的@vite调用

只保留入口文件resources/js/app.ts，不需要手动引入页面组件——Inertia会通过代码分割自动加载页面：

@routes
@vite('resources/js/app.ts')
@inertiaHead

2. 确保app.ts里的Inertia配置正确

关键是用resolvePageComponent配合Vite的import.meta.glob实现动态导入，让Vite在构建时生成对应的页面chunk：

import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'

createInertiaApp({
  // 动态解析页面组件
  resolve: (name) => resolvePageComponent(
    `./Pages/${name}.vue`,
    import.meta.glob('./Pages/**/*.vue') // Vite会扫描所有Pages下的组件做代码分割
  ),
  setup({ el, App, props, plugin }) {
    return createApp({ render: () => h(App, props) })
      .use(plugin)
      .mount(el) // 确保正确挂载到DOM节点
  },
})

3. 排查组件未挂载的问题

之前删除页面组件引入后组件没挂载，大概率是以下原因：

• 检查app.ts里是否正确调用了.mount(el)，且el对应blade里的<div id="app" @inertia></div>
• 页面组件是否正确导出：比如用<script setup>语法，或者导出默认Vue组件
• 执行php artisan optimize:clear清理Laravel缓存，重新构建测试

4. 额外检查项

• 确认vite.config.ts配置正确：

import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    laravel({
      input: 'resources/js/app.ts',
      refresh: true,
    }),
    vue({
      template: {
        transformAssetUrls: {
          base: null,
          includeAbsolute: false,
        },
      },
    }),
  ],
})

• 清理Vite缓存：删除node_modules/.vite目录，重新执行npm install和npm run build
• 确保.env里的APP_URL配置正确，生产环境下资源路径需要和服务器地址匹配

验证步骤 #

1. 执行npm run build
2. 执行php artisan optimize:clear
3. 启动生产环境服务（比如php artisan serve --env=production）
4. 访问页面确认错误消失，组件正常挂载

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