关于vue3.0项目引入jtopo出现的各种问题汇总

article/2025/8/14 19:11:42

jtopo官网demo网址:http://www.jtopo.com/demo.html
最近的项目需要用到jtopo,关于jtopo的引入,之前自己也都尝试过,没想到这次引入会出现这么多问题,所以大概总结一下

1、借用同事以前的经验来引入

npm install jtopo2
// 查看安装到的版本为0.8.4,和同事的一致
// 使用时
import jTopo from 'jtopo2'
let stage = new jTopo.stage()

此时只是最简单的引入,就会出现页面加载不出来的问题,项目不报错,但是页面一直loading,最后报错如下,原因自己也没搞明白,为什么同事用的时候正常,本人使用就出问题了
在这里插入图片描述

2、使用官网最新的引入方式来引入

在官网上下载下来最新版本jtopo-1.4.4_trial-esm-min.js

// 最新版本已经采用标准ESM模块化,可以直接import
import {Stage,Layer,Node,Link
} from './download/jtopo-1.4.4_trial-esm-min.js';

此时会发现,本地是能够正常使用的,然后就开开心心的进行代码开发了,然后到项目打包部署的时候,悲催了,发现,此种方法,在打包后会报如下错误
在这里插入图片描述
基于本人能力有限,遇到这种问题就直接傻眼了,百度此时也没有可参考的文章。没办法就只能咨询所有认识的前端同事,经讨论得出的猜想是,在打包的过程中,babel对esm文件编译转换成common文件的过程中可能出错了

首先尝试修改配置文件babel.config.js文件,让其忽略这个js文件,如下

在这里插入图片描述
后来发现修改配置也不行,也可能是自己没改对

接着又尝试将该js文件放在public中,在index中引入后使用

但是此时自己又卡在了如何使用的问题上
在这里插入图片描述
使用的时候,new Stage()会报如下错误
在这里插入图片描述
就是自己的引入和使用方式都还有问题

最后,咨询了一前端大拿,给到了个解决办法,经尝试,本地和打包后都能正常运行,写法对本人来说很高端,代码如下

在这里插入图片描述
在这里插入图片描述


http://chatgpt.dhexx.cn/article/HWVPkFmM.shtml

相关文章

JTopo 框架教程之一:初始JTopo 框架

JTopo 是什么? JTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。jTopo关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。使用jTopo很简单,可以快速创建一…

jtopo的项目实战(一)

前言 初识jtopo是因为项目中需要一个能够动态绘制网络拓扑图的插件,不但能画出基本的网络拓扑结构,还要能够标识出网络设备的类型以及端口设置,甚至是网络连线的流量信息等,基于这个需求查找了很多资料,初步选中了几款…

jtopo的项目实战(二)

话接上回,继续实现jtopo本身不具有的一些功能,有讲的不对的地方,欢迎大家留言提出,我们一起进步,奥利给,还有,码字不易,如果觉得博主写的不错的欢迎打赏哈! 2.美化节点之…

vue、jtopo绘制鱼骨图

效果如下图所示: 一、文件目录结构: 二、绘制png的鱼头、鱼尾图片 fish_head.png: fish_tail.png: 三、下载js文件 jquery、jtopo请到官网下载。 四、编写鱼骨图核心文件:MakFishBone.js let MakFishBo…

通过JTopo.js在网页绘制网络拓扑图

项目中遇到要在网页中绘制网络拓扑图的需求,要求节点具备点击、拖拽、缩放等交互功能,并且可以显示/隐藏详细信息,数据是设备实时上报来的。 综上,用画拓扑图的工具画一张固定的图片偷懒显然是不行的,最好是找到一个封…

JTopo添加动态连线

效果如下 先在 JTopo 的 link 原型上定义一个方法 window.requestAnimationFrame window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame JTopo.Link.prototype.drawanimepic functi…

JTopo + Vue 实现自定义拖拽流程图

JTopo Vue 实现自定义拖拽流程图 进入体验效果 进入github 市场上做流程图的插件比较多,这里介绍一种基于canvas编写的js插件,结合vue框架做出精美的流程图 首先搭建vue框架,这里就不做介绍,由于jtopo官方demo里用到了jquery&am…

jtopo连线绘制脉冲动画效果

随着需求的日益精细化,人们越来越多的关注到了画面的美观,单纯的节点间连线已经不满足人们的审美观念了,那么能不能让节点间的连线动起来呢?答案是可以的,老规矩,先上图,再说怎么实现。 同样&am…

jTopo入门 简单实现拓扑图

最近项目中需要绘制拓扑图,于是研究了下绘制拓扑图的组件,jtopo是一款比较简单易上手的开发工具包,分享给大家。 jtopo特点 1、完全基于HTML5 Canvas开发,API平易近人、几乎简单到了极致。 2、不依赖任何其他库、执行仅需一个Ca…

jtopo 实现一键布局

最近很忙、也很懒,一堆烦心事,jtopo后面不准备再深究了,本身东西也不多,做出的新功能,新特效也都写到博客中来了,今天给大家分享最近研究的一个新技能——jtopo一键布局,写给大家、也写给自己。…

jtopo简单实例

原贴地址 http://cn-arthurs.iteye.com/blog/2009345 说明: jtopo是一个基于canvas的js拓扑图形组件.比canvasexpress容易多了. 可以方便地加点,加连线,加鼠标事件,拖曳. 号称跨浏览器,不过实际上不支持ie678,加上excanvas.js也没用,除非像canvasexpress那样使用chrome插件. …

Vue — jTopo

近期在Vue项目中使用jTopo来制作集群节点拓扑图,官网http://www.jtopo.com/ 使用vue-cli搭建的模块化开发项目,使用第三方库最好的方式就是通过npm install xxx安装,然后在项目 里import xxx来使用;但是在JTopo官网上并没有发现有…

【Vue引入JTopo及所遇到的问题】

Vue引入JTopo及所遇到的问题 前言一、方案选型二、使用步骤三、总结 前言 项目过程中总是会遇到稀奇古怪的需求,这不,咱老大又让我画一个系统拓扑图放在首页,要求部分数据需从后端获取,动态展示在页面上。对于一个后端人猿来说&a…

Vue+JTopo(一)

1.下载js jtopo 更新下载 (不知道为什么网站被封禁了……在这提供下我现在用的 jtopo-1.4.4_trial-esm-min.js) 链接:https://pan.baidu.com/s/18V1HKwAuxzWM19RD4axGOg 提取码:0304 2.引用 文件放在public/js文件夹下,在index.hml内引用。…

jTopo(一)

jTopo(一) 一、jTopo是什么 jTopo(Javascript Topology library)是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。 jTopo关注于数据的图形展示,它是面向开发人员的,需要进行二次开发。 使用jTopo很简单,可以快速…

windows10下安装MSYS2+MinGW64

1.下载msys2,官方地址:http://www.msys2.org/,这里选择64位的安装器 2.安装完成之后,先别启动msys2,在 安装根目录/etc/pacman.d/ 下找到mirrorlist.mingw32、mirrorlist.mingw64和mirrorlist.msys并进行修改。 mirr…

Win10 下安装 MSYS2

什么是 MSYS2 MSYS2 (Minimal SYStem 2) 是一个MSYS的独立改写版本,主要用于 shell 命令行开发环境。同时它也是一个在Cygwin (POSIX 兼容性层) 和 MinGW-w64(从"MinGW-生成")基础上…

【msys2】使用msys2下载工具的旧版本

背景 苯人在计组实验中使用了msys2来安装verilator工具,结果最新版本的verilator有bug,几经探索找到了利用msys2下载旧版本工具的方法(还可以将现有工具更新为旧版本) 步骤 现以安装旧版本的verilator为例讲解方法。 这是msys…

【Window环境下使用MSYS2搭建CMake + MinGW环境】

目录标题 安装CMakecmake 测试 MSYS2下载MSYS2安装MSYS2修改软件下载源 MSYS2下安装MinGW配置MinGW配置到环境变量 hello world测试 安装CMake Cmake下载地址:https://cmake.org/download/,下一个windows压缩包就好了,因为我比较喜欢自己来配置,免得不知…

用MSYS2安装mingw

文章目录 前言卸载mingw安装MSYS2 前言 安装MSYS2的原因是,在windows安装protobuf时,想用mingw编译protobuf的库,而protobuf的官方手册只给出一句: To build from source using Cygwin or MinGW, follow the Unix installation i…