Laravel Inertia Vue3部署共享服务器报错：Vite清单无法找到Home.vue文件

问题核心原因 #

Vite执行npm run build时会对资源文件做哈希重命名，生成的manifest.json里存储的是哈希后的文件名，而你在模板中动态拼接的原文件路径（resources/js/Pages/{$page['component']}.vue）和manifest里的记录不匹配，导致找不到文件。另外，动态路径在Vite打包阶段无法被解析，对应的组件可能根本没被打包进产物。

具体解决办法 #

1. 前端动态加载组件（推荐方案） #

在resources/js/app.js中用Vite的import.meta.glob批量导入所有页面组件，然后在前端处理组件渲染，不再在后端模板中单独引入：

// app.js 中批量导入Pages目录下的所有.vue文件
const pageComponents = import.meta.glob('./Pages/*.vue')

// 示例：根据后端传递的组件名动态加载
const componentName = window.pageComponentName // 假设后端把组件名存在全局变量
if (pageComponents[`./Pages/${componentName}.vue`]) {
  pageComponents[`./Pages/${componentName}.vue`]().then(module => {
    // 渲染组件逻辑，比如用Vue的createApp挂载
  })
}

后端模板只需要引入app.js即可：

@vite(['resources/js/app.js'])

2. 显式导入所有页面组件 #

如果必须保留后端模板的引入方式，需要在app.js中显式导入所有可能用到的页面组件，确保Vite打包时将它们包含进去：

// app.js 中导入所有页面组件
import './Pages/Home.vue'
import './Pages/About.vue'
// ... 其他页面组件

之后模板中只需要引入app.js，不需要单独引入页面组件，因为组件已经被打包进app.js的chunk中。

3. 检查服务器部署配置 #

• 确认服务器上的manifest.json是最新的npm run build生成的文件，没有上传遗漏或文件损坏。
• 检查Vite配置文件（vite.config.js）中的outDir和base配置：
  • outDir默认是dist，确保服务器上的Web根目录指向这个文件夹。
  • 如果部署在子目录下，需设置base: '/你的子目录名/'，避免资源路径错误。
• 检查服务器上的文件权限，确保Web服务器能读取dist目录下的所有资源文件。

内容的提问来源于stack exchange，提问作者Tommaso V.