Laravel+Vite+Inertia生产构建报错：未知动态导入

问题现象 #

执行npm run build完成生产环境构建后，访问页面出现如下错误：

Uncaught (in promise) Error: Unknown variable dynamic import: ./Pages/Auth/Login.vue

相关配置与代码 #

vite.config.js #

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            ssr: 'resources/js/ssr.js',
            refresh: true,
            
        }),

        vue(),
    ],
    css: {
        postCss: {
            plugins: {
                tailwindcss: {},
                autoprefixer: {},
            },
        },
    },
    resolve: {
        alias: {
            '@images': path.resolve('./resources/images'),
        },
    },
    build: {
        chunkSizeWarningLimit: 200,
        rollupOptions: {
            output:{
                manualChunks(id) {
                  if (id.includes('node_modules')) {
                      return id.toString().split('node_modules/')[1].split('/')[0].toString();
                  }
              }
            }
        }
    }
});

App.js #

import AdminLayout from '@/Layouts/Admin.vue'
import Auth from '@/Layouts/Auth.vue'
import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
import { createPinia } from "pinia";

createInertiaApp({
  resolve: async (name) => {
    const page = (await import(`./Pages/${name}.vue`)).default
    if (page.layout === undefined) {
            page.layout = AdminLayout
        }
        else if (page.layout == 'auth') {
            page.layout = Auth
        }
        return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(createPinia())
            .component("Link", Link)
      .mixin({ methods: { route } })
            .mount(el)
  },
})

文件结构 #

Vue文件存放在resources/js/目录下，核心结构如下：

• Pages
  • Auth
    • Login.vue
• Layouts
  • Admin.vue
  • Auth.vue

解决方案 #

1. 配置路径别名并修正动态导入路径 #

Vite对相对路径的动态导入静态分析支持有限，添加@指向resources/js的别名，让Vite能正确识别所有页面组件：

• 修改vite.config.js的resolve.alias：

  resolve: {
      alias: {
          '@': path.resolve('./resources/js'), // 添加这一行
          '@images': path.resolve('./resources/images'),
      },
  },
  

• 修改App.js中的动态导入语句：

  const page = (await import(`@/Pages/${name}.vue`)).default
  

2. 调整Rollup代码分割配置 #

当前manualChunks配置可能干扰Inertia的页面组件打包，先尝试注释该配置测试：

// build: {
//     chunkSizeWarningLimit: 200,
//     rollupOptions: {
//         output:{
//             manualChunks(id) {
//               if (id.includes('node_modules')) {
//                   return id.toString().split('node_modules/')[1].split('/')[0].toString();
//               }
//           }
//         }
//     }
// }

若问题解决，可优化manualChunks，排除页面组件目录：

manualChunks(id) {
    if (id.includes('node_modules') && !id.includes('/Pages/')) {
        return id.toString().split('node_modules/')[1].split('/')[0].toString();
    }
}

3. 校验页面名称与路径的一致性 #

确保后端传递给Inertia的页面名称（如Auth/Login）与文件路径Pages/Auth/Login.vue完全匹配，Linux环境需注意大小写敏感问题。

4. 清除缓存重新构建 #

执行以下命令清理缓存并重新安装依赖、构建：

rm -rf node_modules
rm package-lock.json
npm install
npm run build
php artisan view:clear
php artisan cache:clear

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