Laravel+Inertia项目中Vite沿用旧目录结构致404问题求助

问题出在Vite的静态路径解析规则没适配你用::分隔的模块页面命名，需要调整两个核心配置：

1. 修正app.js中resolvePageComponent的动态导入路径 #

你的自定义resolve逻辑虽然能找到组件，但动态导入的字符串格式没被Vite正确识别，需要把ExampleModule::ExamplePage转换成标准文件路径格式：

resolvePageComponent: (name) => {
  // 拆分模块名和页面名，拼接正确的组件路径
  const [moduleName, pageName] = name.split('::');
  // 用模板字符串让Vite能静态分析路径
  return import(`../components/js/${moduleName}/Pages/${pageName}.vue`);
}

注意必须用模板字符串传递导入路径，Vite才能正确解析其中的变量，避免把::当成路径的一部分去请求错误地址。

2. 在vite.config.js中配置路径别名与预构建规则 #

给模块目录添加别名，同时告诉Vite预构建这些模块下的页面组件，确保热更新和生产构建都能正确识别路径：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
  plugins: [
    laravel({
      input: ['resources/js/app.js'],
      refresh: true,
    }),
  ],
  resolve: {
    alias: {
      '@modules': '/resources/js/components/js',
    },
  },
  optimizeDeps: {
    include: ['@modules/**/Pages/*.vue'],
  },
});

做完这两步后，Vite就会按照你自定义的目录结构去请求组件，不会再出现旧路径的404错误。

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