vue动态加载组件import引入组件找不到组件(Error: Cannot find module)

111 篇文章 0 订阅
109 篇文章 4 订阅

更多ruoyi-nbcio功能请看演示系统

gitee源代码地址

前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio

演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/

更多nbcio-boot功能请看演示系统 

gitee源代码地址

后端代码: https://gitee.com/nbacheng/nbcio-boot

前端代码:https://gitee.com/nbacheng/nbcio-vue.git

在线演示(包括H5) : http://218.75.87.38:9888
 

1、相同的flowableMixin.js文件

  在nbcio-boot相同的代码,但在ruoyi-nbcio项目就出现下面的问题

async ListCustomForForm() {
      let that = this;
      listCustomForm(this.formQueryParams).then(res => {
        let  cfList = res.rows;
        cfList.forEach((item, index) => {
          let cms = {
              text:item.flowName,
              routeName:item.routeName,
              component: () => import(`@/views/${item.routeName}.vue`),
              businessTable:'wf_demo'
          }
          that.customformList.push(cms);
        })
      })
    },

2、但动态显示这个组件的时候就出现下面的错误

3、问题描述
     使用了动态加载组件的方法,组件用 import() 引入时,直接写成静态路径组件能找到,但是路径里面使用了变量组件就找不到了,报错 Error:Cannot find module
问题原因
     import() 语法是 ES6 中新引入的动态加载模块的语法,它可以在运行时加载模块,返回一个 Promise 对象,可以用来加载不同的模块。
    所以import()语法本身是一个函数,其中可以传入一个字符串,用来表示要加载的模块的路径,但是不能传入变量,因为变量的值在运行时可能会改变,而import()语法是在编译时就已经确定的,所以不能传入变量,但这个说法也有问题,我在nbcio-boot项目就可以用import来实现。

解决方案
使用 webpack 的 require方法引入,虽然没有报错,但显示不正常,没有任何显示

 component: () => import(`@/views/${item.routeName}.vue`),

所以上面的方法没有能解决问题

后来用下面的语句就解决了问题

component: (resolve) => require([`@/views/${item.routeName}.vue`], resolve),

目前原因还不大情况,以后再研究吧。

4、效果图

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宁波阿成

你的支持,是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值