Laravel Inertia从Mix迁移到Vite后动态组件导入失败求助

云原生阿岚

2026-8-24

解决Laravel Inertia从Mix迁移到Vite后动态组件导入失败的问题

核心问题

你之前用require动态注册组件的方式在Vite中不兼容，且错误使用了Inertia的resolvePageComponent（该方法专为加载路由页面设计，不适用于普通组件），导致组件找不到的报错。

正确解决方案

1. 预导入目标组件集合

在需要动态注册组件的Vue组件顶部，用Vite的import.meta.glob预加载所有输入组件：

// 懒加载模式（默认，组件首次使用时才加载）
const inputComponents = import.meta.glob('@/Pages/Components/Inputs/*.vue')

// 立即加载模式（组件初始化时直接加载）
// const inputComponents = import.meta.glob('@/Pages/Components/Inputs/*.vue', { eager: true })

2. 循环中动态注册组件

根据component_name从预导入集合中获取组件并注册：

// 懒加载模式写法
this.$options.components[component_name] = inputComponents[`@/Pages/Components/Inputs/${component_name}.vue`]

// 立即加载模式写法
// this.$options.components[component_name] = inputComponents[`@/Pages/Components/Inputs/${component_name}.vue`].default

关键注意事项

路径匹配一致：import.meta.glob的路径和调用路径必须完全统一，比如用@别名就全程用@开头，不能混用相对路径（./）。
别名配置验证：确保vite.config.js已配置@别名指向resources/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/js/app.js',
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        },
    },
});