Vue 动态导入变量不起作用

Question

我正在尝试动态加载我的 vue3 组件。 我已经在 vite 配置文件中定义了别名，当不动态导入时，这可以正常工作，没有问题。 但是当我进行动态导入时，我收到以下消息：

未捕获（承诺中）类型错误：说明符“@component/FormGroup/Helper”是一个裸露的说明符，但没有重新映射到任何内容。相对模块说明符必须以“./”、“../”或“/”开头。

不知何故，在进行这样的动态导入时，别名似乎不起作用。我该如何解决这个问题？

./vite.config.js

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

const path = require('path');

export default defineConfig({
    plugins: [
        vue({
            template: {
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
    resolve: {
        alias: {
            '~bootstrap': path.resolve(__dirname, 'node_modules/bootstrap'),
            '@bootstrap': path.resolve(__dirname, 'resources/js/components/bootstrap'),
            '@class': path.resolve(__dirname, 'resources/js/class'),
            '@component': path.resolve(__dirname, 'resources/js/components'),
        },
        extensions: ['.tsx', '.ts', '.js', '.vue'],
    }
});

resources/js/components/FormGroup.vue

<script>
/**
 * Get async loader for component
 *
 * @param {string} path
 * @returns {Object}
 */
function getComponent(path){
    return defineAsyncComponent({
        loader: () => import (path /* @vite-ignore */)
    });
}

import {defineAsyncComponent} from 'vue';

export default {
    name: "FormGroup",
    inheritAttrs: false,
    components: {
        Helper: getComponent('@component/FormGroup/Helper'),
        InputField: getComponent('./FormGroup/InputField'),
    },

我尝试在

resources/js/components/FormGroup.vue

中进行动态导入。然后它确实可以工作，但是我需要重复相同的代码大约 10 次，所以我想使用函数自动执行动态导入。

Answer 1

Vue/Vite 至少需要知道组件将在哪里，以便进行分析。如果您以这种方式更改加载器功能，它将起作用

function getComponent(name){
    return defineAsyncComponent({
        loader: () => import (`./comps/${name}.vue`)
    });
}