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

发布于:2024-06-06 ⋅ 阅读:(155) ⋅ 点赞:(0)

更多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、效果图


网站公告

今日签到

点亮在社区的每一天
去签到