webpack5中用import动态导入vue文件报错，怎么解决

[p1j123456]

Question（提问）

webpack5中用import动态导入vue文件报错，试了很多网上说的方法都不行，试过的方案可查看下面的内容。

试过的方案：
①component: item.component === '#' ? Layout : () => import(@/views/${component }.vue) //变量写法
②require组件的方式
③安装插件babel-plugin-dynamic-import-webpack的方式

用了上面的三种方案都报错，不知道咋搞了，求大神们帮看看，谢谢

[p1j123456]

我现在用的是一个临时的方案，思路如下：
通过把组件的路径定义到了一个变量的文件中（以map键值对的方式存储import组件）

然后在需要的地方获取菜单组件，如下：

记得要导入之前设定的map文件

[PetersonLian]

我估计出现这个问题的底层原因是export default xxx的写法原因。
贴个文章：
https://zhuanlan.zhihu.com/p/40733281
https://zhuanlan.zhihu.com/p/97335917

好好研读，你大概就能知道原因了。

[p1j123456]

我估计出现这个问题的底层原因是export default xxx的写法原因。
贴个文章：
https://zhuanlan.zhihu.com/p/40733281
https://zhuanlan.zhihu.com/p/97335917

好好研读，你大概就能知道原因了。

好的，谢谢

[EdwinBetanc0urt]

Greetings I have the same problem, I had to solve in an impractical way with a switch case, evaluating all possible values of the variable.

    renderDashboard() {
      const { fileName } = this.metadata
      // TODO: Add support to this list of currently unsupported dashboards
      if (this.unsupportedDashboards.includes(fileName)) {
        return
      }

      let dashboard
      switch (fileName) {
        case 'recentItems':
          dashboard = () => import('@/components/ADempiere/Dashboard/recentItems')
          break
        case 'userfavorites':
          dashboard = () => import('@/components/ADempiere/Dashboard/userfavorites')
          break
        case 'docstatus':
          dashboard = () => import('@/components/ADempiere/Dashboard/docstatus')
          break
        default:
          dashboard = () => import('@/components/ADempiere/Dashboard/calendar')
          break
      }
      return dashboard
      // return () => import(`@/components/ADempiere/Dashboard/${fileName}`)
    }