vue-element-admin webpack5中用import动态导入vue文件报错,怎么解决

9w11ddsr  于 2022-10-22  发布在  Webpack
关注(0)|答案(4)|浏览(261)

Question(提问)

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

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

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

6rqinv9w

6rqinv9w1#

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

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

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

ve7v8dk2

ve7v8dk22#

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

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

nfzehxib

nfzehxib3#

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

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

好的,谢谢

kxeu7u2r

kxeu7u2r4#

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}`)
    }

相关问题