带Rollup的Vue 2.6:按变量名导入组件

Question

我正在尝试添加动态路由到我的vue路由器(使用router. addroute())。它工作到目前为止，但我得到一个问题，只要我试图设置一个组件为我的动态路由。

下面是有效的代码:

var name = "reports";
var path = "reports/foo";
var item = {
name: name,
path: path,
component: () => import( "../pages/reports/Reports_Foo.vue" )
};

调用页面时，它会正确加载Reports_Foo.vue的内容

但是当我想动态加载vue文件时，像这样:

var filename = "Reports_Foo";
var name = "reports";
var path = "reports/foo";
var item = {
name: name,
path: path,
component: () => import( "../pages/reports/"+filename+".vue" )
};

它不再工作，我得到以下javascript错误:

TypeError: Failed to fetch dynamically imported module: https://localhost:123456/js/pages/reports/Reports_Foo.vue

为什么?你知道如何解决这个问题吗?

编辑:我正在使用rollup将文件转换成块，然后引用它们。

Answer 1

尝试显式加载default导出:

var item = {
name: name,
path: path,
component: async () => (await import("../pages/reports/"+filename+".vue")).default
}