首页 > 其他分享 >vue动态加载组件import引入组件找不到组件(Error: Cannot find module)

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

时间:2024-06-05 11:02:39浏览次数:21  
标签:nbcio vue module gitee item 组件 import 加载

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

标签:nbcio,vue,module,gitee,item,组件,import,加载
From: https://blog.csdn.net/qq_40032778/article/details/139455730

相关文章

  • 界面控件DevExpress WinForms的流程图组件 - 可完美复制Visio功能(二)
    DevExpressWinForms的Diagram(流程图)组件允许您复制MicrosoftVisio中的许多功能,并能在下一个WindowsForms项目中引入信息丰富的图表、流程图和组织图。P.S:DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能......
  • 交互式流程图组件DHTMLX Diagram v6.0 - 拥有更灵活的高度可定制功能
    DHTMLXDiagram库允许用几行代码构建JavaScript流程图,通过自动布局和实时编辑器,它可以更容易地将复杂数据可视化到一个整洁的层次结构中。DHTMLXDiagramv6.0版本发布,带来了众多令人兴奋的新功能和改进,使得这个JavaScript图表库更加强大和灵活。此次更新不仅增强了现有的功能......
  • 毕业设计-基于Springboot+Vue的影城管理系统的设计与实现(源码+LW+包运行)
    如需完整项目,请私信博主基于SpringBoot+Vue的影城管理系统开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven互联网发展至今,已经解决了很多我们解决不了的难题,使得我们工作更加便捷,提高了我们的工作效率。目前各行各业都在运用网络信......
  • 毕业设计-基于Springboot+Vue的音乐网站与分享平台 的设计与实现(源码+LW+包运行)
    如需完整项目,请私信博主基于SpringBoot+Vue的音乐网站与分享平台开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven互联网发展至今,已经解决了很多我们解决不了的难题,使得我们工作更加便捷,提高了我们的工作效率。目前各行各业都在运用......
  • Vue 前端页面利用MediaRecorder实现音频录制
    Don'tTalk,codeishere:重点是startRecord方法<template><div><el-tooltipclass="item"effect="dark"content="再次点击【开始录音】即为重新录制,之前录制的将被作废"placement="top"><el-button:disabled=......
  • .NET C# 程序自动更新组件
    引言本来博主想偷懒使用AutoUpdater.NET组件,但由于博主项目有些特殊性和它的功能过于多,于是博主自己实现一个轻量级独立自动更新组件,可稍作修改集成到大家自己项目中,比如:WPF/Winform/Windows服务。大致思路:发现更新后,从网络上下载更新包并进行解压,同时在WinForms应用程序中显示......
  • Vue前端实现接收rabbitMQ及时消息 原
    https://blog.csdn.net/dawnStart/article/details/110479833打开APPVue前端实现接收rabbitMQ及时消息原创2020-12-0214:03:11阅读量1.4wAI必读dawnStart码龄4年关注Vue前端实现实时接收rabbitMQ及时消息,看了别人写的不太详细1.rabbitMQ安装Stom插件2.Vu......
  • Vue3-shallowRef与shallowReactive
    shallowRef作用:创建一个响应式数据,但只对顶层属性进行响应式处理。用法:letmyVar=shallowRef(initialValue);特点:只跟踪引用值的变化,不关心值内部的属性变化。shallowReactive作用:创建一个浅层响应式对象,只会使对象的最顶层属性变成响应式的,对象内部的嵌套属......
  • Vue3-Pinia状态管理器
    Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态。如果你熟悉组合式API的话,你可能会认为可以通过一行简单的 exportconststate=reactive({}) 来共享一个全局状态。对于单页应用来说确实可以,但如果应用在服务器端渲染,这可能会使你的应用暴露出一些安全漏洞......
  • vue后台用户路由权限和按钮权限实现原理
    概论主要是通过一个唯一标识name或者id来过滤判断用户所处的角色是否有路由的权限或者按钮的权限一般路由都有一个一个name可以作为唯一标识一般按钮的话,可以自定义一个name作为标识业务逻辑后台通过选中路由或者按钮给角色,代表这个角色有数组中name[]的权限,用户或者部门再......