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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/847977.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Flutter开发效率提升1000%,Flutter Quick教程之定义Api(三)

将tab键切换到Response,会出现这么一个界面 这是添加api返回的json数据。比如我们添加一个json数据。 添加完json数据后,右上角有一个删除按钮。要换json数据的话,可以点击清除再重新输入。 这时候,左边的面板上还会显示出 这个的…

防勒索软件的功能特点

随着信息技术的飞速发展,网络安全问题日益凸显,其中勒索软件(也称为勒索病毒)的威胁尤为严重。勒索软件通过加密用户数据或锁定用户系统来威胁用户支付赎金,一旦感染,用户将无法正常访问或使用其重要数据,导致严重的经…

Python02:python代码初体验

0、python代码初体验 print(hello,world)看到执行结果输出,则OKK! 1、输出结果取消换行 当print多个执行结果,又希望它们在同一行展示时: print(hello,world, end)print(Hao are, end ) print(you, end?) print(I am fine.) # end参数可…

C++——从C语言快速入门

目录 一、数组 1、声明数组 2、初始化数组 3、访问数组元素 4、示例 5、注意事项 6、数组小练习 计算器支持加减乘除 数组找最大值 二、指针 三、字符串 string 类型 一、数组 在 C 中,数组是一种存储固定大小的相同类型元素的序列。数组的所有元素都存…

白银票据~

一. 白银票据的原理 白银票据就伪造ST票据, kerberoasting是破解ST票据中的服务用户hash值,有以下区别: 白银票据:伪造的ST使用的是机器用户的Hash值 Kerberoasting:破解的是ST的域用户的hash值二. 白银票据的利用条件 1.域名 …

操作失败——后端

控制台观察,页面发送的保存菜品的请求 返回的response显示: ---------- 我开始查看明明感觉都挺正常,没啥错误,就是查不出来。结果后面电脑关机重启后,隔一天看,就突然可以了。我觉着可能是浏览器的缓存没…

【学习】DCMM认证提升企业竞争优势的表现

DCMM认证是企业提升数据管理能力的重要途径。它不仅可以帮助企业评估自身的数据管理水平,还可以为企业提供改进的方向和目标。在数字化时代,拥有强大的数据管理能力是企业成功的关键。因此,通过DCMM认证,企业可以更好地适应数字化…

ruoyi-nbcio基于jeecg的flowable前端支持自定义表单组件的自动获取方法

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码: https://gitee.com/nbacheng/ruoyi-nbcio 演示地址:RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码: h…

5 种技术,可用于系统中的大数据模型,而不会使系统崩塌

文章目录 一、说明二、第一种:批量大小三、第二种:主动学习四、第三种:增加代币数量五、第四种: 稀疏激活六、第五种:过滤器和更简单的模型后记 一、说明 以下是本文重要观点的摘要。阅读它以获取更多详细信息/获取原…

《深入浅出存储引擎》不同数据库背后的数据存储方案

在大数据和AI时代,数据库成为各类应用不可或缺的重要组成部分。而数据库中的数据依赖存储引擎进行管理,包括数据的存储、查询、更新和删除等。因此,在设计系统时,选择正确的数据库存储引擎方案变得尤为重要。这篇文章将以关系型、…

会计电子档案系统方案

会计电子档案系统方案是指建立一个以电子方式存储和管理会计档案的系统。该方案具体包括以下几个方面: 1. 系统架构设计:确定系统的组成以及各个组件之间的关联和交互方式。包括数据库设计、系统服务器和客户端的部署等。 2. 电子档案管理:建…

一切模型皆可联邦化:高斯朴素贝叶斯代码示例

联邦学习是一种分布式的机器学习方法,其中多个客户端在一个中央服务器的协调下合作训练模型,但不共享他们的本地数据。一般情况下我们对联邦学习的理解都是大模型和深度学习模型才可以进行联邦学习,其实基本上只要包含参数的机器学习方法都可…

C# 实时声音频率图绘制

C# 实时声音频率图绘制 采集PCM音频数据 音频原来自麦克风 音频源来自录音文件 处理PCM音频数据 使用 FftSharp.FFT 将PCM数据进行傅里叶变换 安装FftSharp框架 在Nuget包管理器中搜索FftSharp并安装 傅里叶变换 将采集到的PCM数据进行傅里叶变换 // 傅里叶变换System.…

新手如何正确使用代理IP,一篇文章学会,包含实战案例

前言 一、代理IP1.1 什么是代理IP?1.2 代理ip分类1.3 代理IP的作用和优势 二、更换代理IP的方法2.1 重启路由器或光猫2.2 用拨号 vps 重拨更换动态IP代理。2.3 使用浏览器更换IP 三、IPIDEA代理的优势四、提取代理IP4.1 提取步骤4.2 浏览器使用代理IP 五、使用代理I…

CSS(盒子模型,定位,浮动,扩展)

CSS 盒子模型:外边距:内边距:水平居中: 定位:相对定位:绝对定位:固定定位: 浮动:扩展: 盒子模型: 盒子模型(Box Model) 规定了元素框处理元素内容…

Java核心: 使用instrumentation

在上一篇Java核心: 注解处理器我们提到,通过实现AbstractProcessor,并调用javac -processor能够生成代码来实现特殊逻辑。不过它存在两个明显的问题: 只能新增源文件来扩展逻辑,无法修改现有的类或方法必须有一个单独的编译过程,…

3毛钱的QC协议芯片TYPE-C USB快充接口物理层IC

前言: 现在基本使TYPE-C打天下了。很多产品和TYPEC息息相关,如笔记本的电源接口,手机更不用说了,甚至电烙铁也使TYPE-C接口的了,很多涉及采用TYPE-C接口的快充接口,简单的可以用电阻欺骗快充头&#xff0c…

什么是it运维工单系统?有哪些应用价值?

it运维工单系统是一个智能化的it运维服务管理系统,可以为企业和服务提供商提供高效的it运维服务管理,它可以自动分配任务、优化工作流程并跟踪工作进展,从而大大提高it运维工作效率和客户满意度。 一、it运维工单系统是什么? it…

100000开发的系统,执意重构钱多执念?

收到一位客户询盘,要重做自己的系统,原因:嫌弃基于PHP做的系统服务器消耗大。咨询了好几拨人,觉得外包公司贵,个人程序员又不靠谱,总之一门心思要重构。 现状: 1、系统研发耗费100000。 2、目…

Java编程常见问题汇总五

系列文章目录 文章目录 系列文章目录前言一、捕获不可能出现的异常二、transient的误用三、不必要的初始化四、最好用静态final定义Log变量五、选择错误的类加载器 前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分…