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,一经查实,立即删除!

相关文章

【python实现】实时监测GPU,空闲时自动执行脚本

文章目录 代码 代码 # author: muzhan # contact: levio.pkugmail.com import os import sys import time cmd nohup python -u train_post_2d_aut.py > output1.log & # gpu空闲时,需要执行的脚本命令 def gpu_info():gpu_status os.popen(nvidia-smi…

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

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

Windows.h 是什么?

认识 Windows.h 在 C 中,进行 Windows 开发通常使用的库是 windows.h 这是 Windows 平台特有的一个头文件,它包含了Windows API(应用程序接口)的声明和定义,允许开发者编写与 Windows 操作系统交互的程序。 windows.…

防勒索软件的功能特点

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

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 中,数组是一种存储固定大小的相同类型元素的序列。数组的所有元素都存…

【Rust】——【面向对象语言的特征】

💻博主现有专栏: C51单片机(STC89C516),c语言,c,离散数学,算法设计与分析,数据结构,Python,Java基础,MySQL,linux&#xf…

zookeeper集群安装

首先要关闭防火墙,修改配置文件 关闭防火墙命令:systemctl stop firewalld.service 解压到usr/local下:tar -zxvf apache-zookeeper-3.8.4-bin.tar.gz -C /usr/local/ 重命名:mv apache-zookeeper-3.8.4-bin.tar.gz zookeeper …

白银票据~

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

操作失败——后端

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

建筑设计资质等级升级需要满足什么条件?

原有资质要求:企业必须已持有较低级别的设计资质,并在该资质等级范围内从事设计业务至少三年。 技术与管理团队:必须具备与申请资质等级相适应的技术人员,包括一定数量的注册建筑师、工程师和其他专业技术人员。 需要具有经验丰…

如何设计一个数据埋点的完美技术方案?

数据上报 基础原理:通过ajax往后台上报数据,后台根据每一段时间的数据,做报表统计 需要考虑的因素: 1.不要影响到正常接口,可以放后台执行,防止阻塞主线程(settimeout),异步(webwork) 2.可以通过window.requestIdleCallback在…

安全区域边界

文章目录 安全区域边界边界防护跨边界流量通过受控接口通信非法内联非法外联限制无线网络 访问控制启用基于白名单的访问控制策略优化访问控制表根据五元组控制根据会话状态控制根据应用协议和内容控制 入侵防范外部发起的攻击内部发起的攻击对新型攻击防范及时检测攻击行为 恶…

git -- 清除本地分支以及删除远程分支

清除本地分支 1. 列出所有分支:你可以列出所有分支来确认你想要删除的分支名。 git branch -a 2. 删除本地分支: 删除已经合并的分支:git branch -d 分支名 -d 参数用于删除已经被合并到当前分支的分支。 强制删除未合并的分支:git branch -D 分支名 -D 参数用于强制删除…

【学习】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…

金监总局:加快出台机构涉刑案件管理办法 建立风险导向的稽查体系

1. "金融监管新策略:外科手术式处理重大风险" 2. "重拳出击:金监总局的新计划防范金融风险" 3. "金融稽查聚焦:打击侵害行业利益的行为" 4. "保护金融稳定:2024年金融监管新动向" 5. &qu…

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

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

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

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

会计电子档案系统方案

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