主页 / 问题 / 1601183
Accepted
Trottenheimer
Asked:2024-11-29 16:17:36 +0000 UTC2024-11-29 16:17:36 +0000 UTC

如何使用ModuleFederataion在Vue3中实现动态导入

  • 772

我通过 ModuleFederation 连接了两个应用程序。一切似乎都工作正常，所有依赖项都已就位，但只有当您编写如下所示的导入函数时它才有效：

const loadComponent = () => {
  component.value = defineAsyncComponent(() => import(`app1/test`));
};

我希望能够将此功能用于不同的组件，即像这样：

const loadComponent = (path) => {
  component.value = defineAsyncComponent(() => import(`app1/${path}`));
};

但是使用第二种方法时，会出现错误：

找不到模块：错误：无法解析“C:\Users\User\web\host\src”中的“app1”

而且，无论是直接在导入函数中编辑该行，还是通过变量提前写入，都没有关系：

const loadComponent = () => {
const path = 'app1/test' 
  component.value = defineAsyncComponent(() => import(path));
};

这个选项也不起作用。有一个假设，如果您在导入中不提供干净的行，Vue 将在其自己的目录中查找组件，而不是在 ModuleFederation 中。

请告诉我如何修复这个错误

javascript

2 个回答

  1. 乍一看，这一切似乎都很棒。但！！！

    答案或许可以从函数名中找到defineAsyncComponent(...)。

    该名称的语义define*假设返回的变量是预定义的常量，并且在动态加载器的上下文中，不应使用具有该名称的函数！

    上面的例子违反了语义逻辑。而且我们在Vue 手册页上找不到这样的用法。

    让我们回到问题：Vue在不同的上下文中调用函数。并且动态加载程序loadComponent()可能是在其期望的上下文之外的上下文中调用的define*。为什么第一个选项有效尚不清楚，当然，它是否有效（问题中尚不清楚），但应该重新考虑安装和加载组件的实现。

    • 0
  2. Best Answer

    也许解决方案是最糟糕的，但是当我不将导入路径包装在对象中，而是使用指定路径包装导入函数本身时，它对我有用。所以对于 Vue3 来说，解决方案是这样的：

    const componentList = ref([
  {name: 'patientCard', importFunction: () => import('vaccination/patientCard')}
])

const loadComponent = async(importFunction) => {
  component.value = defineAsyncComponent(() => importFunction());
};

loadComponent(componentList.value[0].importFunction)

    理论上，由于我们将导入包装在对象内的函数中，因此导入只会在调用importFunction函数本身时返回一个 Promise 。

    • 0

相关问题