vue3+vite使用antv/g6线上报错，本地没问题

已于 2022-09-07 19:36:53 修改
阅读量1.4k 收藏
点赞数 3
文章标签： 前端 javascript 开发语言
于 2022-09-07 19:35:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zoooo_/article/details/126752280
版权

vue3+vite使用antv/g6画拓扑图，但是本地没问题正常运行，上线就会报路由错误；

问题描述如下文章；但是解决办法不同

前端踩坑记录，有关antv G6和vite兼容性问题_sha虫剂的博客-CSDN博客_antv 兼容性

上面的解决办法是参考了官网的解决办法：

Vite + G6 报错 | G6

搜了很多文章，后来问了别人。得到了更简单的解决办法是修改g6的引入方式

引入路径改为

import G6 from '@antv/g6/dist/g6.min' 即可

官网给的是直接引@antv/g6,，不清楚原理是什么

但是改变了引入路径后确实线上没有阻塞了。

解决了，真好！

祝您生活愉快～

zoooooooombie
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
antv/x6+antv/x6-vue-shape+vite+vue3 打包踩坑记录
weixin_43969709的博客
07-18 4581
antv/x6+antv/x6-vue-shape+vite打包后生产环境报错解决方法有以下4种...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue3+vite+antd 后台管理系统基础模板
02-06
vue3+vite+antd后台管理系统 vue3 vite antd 后台管理系统 基础模板 vite秒启动 弃用webpack，解决启动加载过慢的问题
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
Vue3-Vite-ts 前端生成拓扑图，复制即用
最新发布
weixin_43896125的博客
05-30 995
使用dagre-d3，vis.js 两种方法
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图更加符合用户的个性化需求。 当然，流程图编辑页面还需要支持各种基础操作。提供了复制、剪切、粘贴、撤销、恢复、删除、清空等常用功能，使我们可以轻松地对流程图进行编辑和调整。此外，还支持组合和取消组合节点，方便用户对流程图进行整体管理。 为了适应不同项目的需求，还提供了适配大小、实际比例以及连线模式等功能。这些功能不仅可以帮助我们更好地展示流程图，还可以提高编辑效率。 最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。 流程图编辑页面是一个专门用于创建、编辑和查看流程图的界面。它通常包括画布、工具栏、属性面板等部分。画布用于展示流程图，并允许用户进行拖拽、缩放等操作；工
(G6)项目使用G6安装依赖后渲染报错Object(...)和graph未定义
nyf_unknow的博客
08-26 1546
报错1报错2(重点)draw . js?原因之前项目有用过@antv 顺带装的g-canvas为@0.5.12与本次安装@antv/g6所带的g-canvas为@0.5.2版本不同，导致画布渲染异常。解决在不影响之前图的前提下，删掉@0.5.12版本更换为@0.5.2版本。......
vue中使用Antv G6报错invalid container
m0_37378152的博客
12-11 7261
初始化graph需要等dom渲染之后，否则找不到container对应div。将初始化写在mounted里面就行了。我一开始写在了created里面就报错了。
@antv/g6在ie11报语法错误，兼容处理
weixin_44729896的博客
01-05 2398
错误分析: 上图清晰明了指出@antv/g6在es6转es5的时候没全部转换完，ie不识别es6代码，所以要添加一个babel-profill。 项目中引入babel-polyfill，安装方法可以自行百度，在这里我直接上命令： npm i --save babel-polyfill 第一步：引入babel-polyfill 引入babel-polyfill的方式无非有以下几种 1.在main.js的顶部直接使用 import ‘babel-polyfill’ 2.在vue.config.js中，直接在
关于在vue2中使用antv/x6，本地开发环境正常，打包部署之后再对graph进行添加node,edge操作时，抛错，e is not a function
coding_BOYEST的博客
07-03 856
关于在vue2中使用antv/x6，本地开发环境正常，打包部署之后再对graph进行添加node,edge操作时，抛错 e is not a function
AntV G6的安装与搭建
笑到世界都狼狈的博客
12-22 8190
项目中有遇到一个偏展示，但echarts的graph实现效果又不是很理想，所以就研究了antv G6,到目前为止支持的还可以，所以写几篇文件记录一下学习G6的过程 antv官网 首先，我在官网例子中找到了G6,感觉G6比较适合我们现在的拓扑图需求，所以就开始了一些简单的研究 官网的快速上手 1.安装与引用 <1>使用npm安装与引用 （1）在项目中使用npm包引入，需要使用如下命令安装g6 npm install --save @antv/g6 具体效果如下图所示： ..
Vue组合式API 使用 AntV x6报错： “Error: Ensure the container of the graph is specified and valid”
肖潇不写代码
08-01 1096
Vue组合式API 使用 AntV x6报错： “Error: Ensure the container of the graph is specified and valid“
VUE项目运行失败原因以及解决办法
Smile1552911411的博客
04-04 1万+
ENOENT: no such file or directory, open 'D:\code\human_resource_management 3\package.json'
vue 引用G2/G6 注意（Uncaught SyntaxError: Identifier ‘e‘ has already been declared）
Geek-Haoyu
04-08 823
vue 打包 Uncaught SyntaxError: Identifier 'e' has already been declared
npm install --save @antv/g6报错
zhangxiaodui的博客
10-19 2722
npm install --save @antv/g6报如下错误 CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException FullyQualifiedErrorId : UnrecognizedToken 从错误中得知源文本中存在无法识别的标记 解决办法 npm install --save '@antv/g6' 给依赖包外层加单引号或者双引号 ...
前端踩坑记录，有关antv G6和vite兼容性问题
sha虫剂的博客
02-22 2951
vite+G6打包报错，开发环境无问题，打包后相关页面打不开
Vue3.x中使用AntV G6绘制力导图实现自适应
BreenCL的博客
12-05 4438
项目下使用绘制图谱；图谱节点为两个地址，节点间存在多条连线情况需求；鼠标悬浮到节点上方时，高亮当前节点并出现气泡提示，展示相关信息；点击图谱连线后需要高亮关联节点和当前连线；图谱大小需要保证自适应（这里可以是根据窗口自适应，也可以是可调整大小的弹窗内的自适应
记录一个问题：G6和vite的兼容性问题
weixin_39492106的博客
03-11 1711
G6 antd vue3 vite
vue中使用AntV G6 — 基础篇
热门推荐
豆。的博客
04-20 1万+
阿里AntV-G6使用介绍 一 基础篇 AntV G6 官网 AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。 文章目录阿里AntV-G6使用介绍 一 基础篇一、G6 是什么？二、使用步骤1.安装&引入2.基本使用三、结果图 一、G6 是什么？ G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 二、使用步骤 1.安装&amp
vue3+vite+@antv/f2
03-01
Vue 3是一种流行的JavaScript框架，用于构用户界面。它具有响应式数据绑定、组件化开发和虚拟DOM等特性，使得开发者可以更高效地构建交互式的Web应用程序。 Vite是一个基于ES模块的构建工具，专为现代化的前端开发而设计。它具有快速的冷启动、按需编译和热模块替换等特性，使得开发者可以更快地构建和调试应用程序。 @antv/f2是一个基于Canvas的移动端可视化库，用于绘制各种图表和图形。它提供了丰富的图表类型和交互功能，可以轻松地创建漂亮而功能丰富的移动端可视化应用。 结合Vue 3、Vite和@antv/f2，你可以使用Vue 3的响应式数据绑定和组件化开发能力来构建交互式的Web应用程序，并使用Vite进行快速的开发和调试。同时，你可以使用@antv/f2来绘制各种图表和图形，实现移动端的可视化效果。 如果你想了解更多关于Vue 3、Vite和@antv/f2的信息，可以参考官方文档或者相关教程。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值