Laravel Vue3 和 Vite Rollups - 动态导入失败

Question

我花了一些时间使用 Inertia、Vite、Vue3 Composition API 和 Typescript 将应用程序重写为 Laravel 9。

一切都很顺利，当我通过运行npm run build捆绑生产的所有内容在本地环境上测试生产构建时，看起来不错。

现在我已经启动了新的代码库，但一半的网页无法正常工作..这是为什么？因为Vite无法解析我的动态导入。

npm run build我不明白我的本地（有效）与实时站点之间的区别npm run build...我知道npm run dev使用 es6bundling 而npm run build使用 rollup。

我有一个非常基本的设置，如下所示，currentHeader是动态组件：

<template>
    <component
        :is="currentHeader"
    />
</template>

我尝试了几种不同的方法，但没有任何效果。它仅在我对字符串路径进行硬编码时才有效，这会阻止我使其动态化

1 -我将所有路径从使用 @/ 更改为使用直接路径

2 -我尝试将动态导入的路径添加到vite.config.js

build: {
    rollupOptions: {
        external: [
            "./components/HeaderStandard.vue",
            "resources/js/Components/BitHeader/components/HeaderStandard.vue",
        ]
    }
}

3 -我尝试defineAsyncComponent像这样加载标题：

let headers = {
    secondary: './components/HeaderSecondary.vue',
    standard: './components/HeaderStandard.vue'
}
const headerPath = shallowRef<string>(headers.default);
const currentHeader = defineAsyncComponent(() => import(headerPath .value));

4 -我尝试用链加载标头......

let headers = {
    secondary: './components/HeaderSecondary.vue',
    standard: './components/HeaderStandard.vue'
}
const headerPath = shallowRef<string>(headers.default);

function importHeader(){
    import(headerPath.default).then(val => {
        currentHeader.value = val.default;
    });
}

我尝试了其他几种解决方案，但没有任何结果

还有其他问题，但没有一个能解决我的问题

我还从汇总中检查了一个包，它应该有帮助，但也不起作用。当我添加dynamicImportVars到vite.config.js下面的插件时，整个页面崩溃了，我认为该include键是默认的，正如文档中所说的那样。

资源

1 - 我一直在研究这个问题，该问题在 3 个月内有 1000 次浏览，但没有人点赞，所以人们仍然需要答案。

2 - 我一直在看这个问题，没有答案，有 3 票赞成

3 - 我一直在研究这个和这个看起来很有希望的东西，但我无法让它发挥作用。

错误是这样的：

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module

有人知道这个问题的答案吗？