Laravel+Vue+Vite中defineAsyncComponent构建失败问题求助

问题场景 #

• 使用最新Laravel + Vite，目标是异步批量注册resources/js/components下的Vue组件
• Laravel默认提供的自动注册为同步（eager）模式，代码如下：

Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
    app.component(path.split('/').pop().replace(/\.\w+$/, ''), definition.default);
});

• 手动单个异步注册在npm run dev和npm run build模式下均正常：

import { defineAsyncComponent } from 'vue'
const ExampleComponent = defineAsyncComponent( () => import('./components/ExampleComponent.vue') );
app.component('example-component', ExampleComponent);

• 自行实现的批量异步注册在dev模式正常，但执行npm run build后组件无法正确编译/加载，代码如下：

let index = 0;
Object.entries(import.meta.glob('./**/*.vue', { eager: true })).forEach(([path, definition]) => {
    index++
    let mn = path.split('/').pop().replace(/\.\w+$/, '')
    let var_name = mn+'_'+index
    let module_name = var_name.replace('_'+index, "")
    let final_name = var_name.replace('_'+index, "")
    const camelToDashed = module_name.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`).slice(1);
    window.defineAsyncComponent = defineAsyncComponent
    window.app = app
    let toEval = `const ${final_name} = window.defineAsyncComponent( () => import('./components/${module_name}.vue'));window.app.component('${camelToDashed}', ${module_name})`
    console.log(toEval);
    const exe = Function(toEval); exe();
    console.log(camelToDashed + ' is ready to be used, as '+module_name+'.')
});

• 附vite.config.js配置片段：

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    build: {
        minify: true,
        cssCodeSplit: true,
        cssMinify: true,
        reportCompressedSize: true,
        chunkSizeWarningLimit: true,
        outDir: './public/build/',
        sourcemap: true, 
        emptyOutDir: true, 
        rollupOptions: {
            output: {
                entryFileNames: '[name].[hash].js',
                chunkFileNames: '[name].[hash].js',
                assetFileNames: '[name].[ext]'
            },
        },
    },
    resolve: {
        alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
        },
    },
});

问题根源 #

1. 动态字符串import无法被Vite静态分析：通过Function拼接字符串生成的import路径，Vite构建时的静态分析无法识别，导致组件不会被打包进产物。
2. 错误使用eager: true：import.meta.glob的eager: true会同步加载所有组件，和异步注册的初衷矛盾，且代码中未用到返回的definition对象，属于冗余操作。
3. 不必要的全局暴露与动态执行：将defineAsyncComponent和app挂到window再动态执行代码，既增加安全风险，也破坏了Vite的打包优化逻辑。

解决方案 #

直接使用import.meta.glob的异步模式（默认即为异步，无需eager: true），配合defineAsyncComponent批量注册，代码简洁且能被Vite正确分析：

import { defineAsyncComponent } from 'vue';

// 匹配components下所有.vue文件，异步加载
Object.entries(import.meta.glob('./components/**/*.vue')).forEach(([path, componentLoader]) => {
    // 提取组件名：比如 './components/ExampleComponent.vue' → 'ExampleComponent'
    const componentName = path.split('/').pop().replace(/\.\w+$/, '');
    // 转换为短横线命名：ExampleComponent → example-component
    const kebabCaseName = componentName.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`).slice(1);
    // 注册异步组件
    app.component(kebabCaseName, defineAsyncComponent(componentLoader));
});

关键说明 #

• import.meta.glob('./components/**/*.vue')返回的是组件加载器函数（() => import('./xxx.vue')），直接传给defineAsyncComponent即可，无需手动拼接路径。
• Vite会静态分析import.meta.glob的匹配规则，构建时自动将所有匹配到的组件打包为异步chunk，运行时按需加载。
• 移除了冗余变量与动态执行逻辑，代码更清晰，同时兼容dev和build模式。

验证步骤 #

1. 替换原代码后执行npm run dev，确认组件正常加载。
2. 执行npm run build，查看public/build目录下会生成对应的组件chunk文件。
3. 部署后访问页面，组件会按需加载，无编译或加载错误。

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