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

已于 2022-09-07 19:36:53 修改
阅读量1.6k 收藏
点赞数 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导致。解决方法是将g6的引入路径改为'@antv/g6/dist/g6.min'，此更改避免了线上部署时的路由错误，确保了应用正常运行。
摘要由CSDN通过智能技术生成

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 4637
antv/x6+antv/x6-vue-shape+vite打包后生产环境报错解决方法有以下4种...
Antv G6超详细笔记及使用案例分享
最新发布
m0_73884922的博客
06-22 2268
G6 是一个简单、易用、完备的图可视化引擎，它在高定制能力的基础上，提供了一系列设计优雅、便于使用的图可视化解决方案。能帮助开发者搭建属于自己的图可视化、图分析、或图编辑器应用。
vue3+vite+ts+antv/x6搭建的流程图编辑页面
03-26
这个编辑页面中，可以根据自己的需求，轻松创建和编辑各种形状的节点，包括矩形、圆形、菱形等，甚至还可以自定义节点的样式和属性。同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。 除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图更加符合用户的个性化需求。 当然，流程图编辑页面还需要支持各种基础操作。提供了复制、剪切、粘贴、撤销、恢复、删除、清空等常用功能，使我们可以轻松地对流程图进行编辑和调整。此外，还支持组合和取消组合节点，方便用户对流程图进行整体管理。 为了适应不同项目的需求，还提供了适配大小、实际比例以及连线模式等功能。这些功能不仅可以帮助我们更好地展示流程图，还可以提高编辑效率。 最后，还为这些功能提供了对应的快捷键，使得我们可以更加快速地上手并完成流程图编辑项目。这些快捷键的设计充分考虑了用户的使用习惯，使得操作流程更加顺畅和高效。 流程图编辑页面是一个专门用于创建、编辑和查看流程图的界面。它通常包括画布、工具栏、属性面板等部分。画布用于展示流程图，并允许用户进行拖拽、缩放等操作；工
Vue3.x+AntV G6+Element Plus
12-04
一个开箱即用的基于Vue3使用AntV G6绘制图谱的项目，项目中包含两个demo，其一：图谱可以实现自适应窗口大小；其二：图谱自适应DOM元素大小。帮助你更好的理解并在Vue3.x中使用AntV G6库，有助于初学者快速上手
vue3 vite项目中使用antv x6 报错 Cannot read property ‘ToolItem‘ of undefined
m0_64780137的博客
05-15 252
vue3 vite项目中使用antv x6 报错 Cannot read property 'ToolItem' of undefined
vue中使用Antv G6报错invalid container
m0_37378152的博客
12-11 7313
初始化graph需要等dom渲染之后，否则找不到container对应div。将初始化写在mounted里面就行了。我一开始写在了created里面就报错了。
使用G6引擎报错TypeError: Cannot read properties of undefined (reading ‘set‘)
weixin_45598400的博客
03-12 438
@antv/G6
下载antv-G6的时候npm报错问题
lilikk1314的博客
09-26 4175
npm下载g6的时候,直接用的命令--直接在官网上复制的 npm install --save @antv/g6 但是下载之后,想要启动项目,却一直报错 ERROR Failed to compile with 3 errors These dependencies were not found: * core-js/modules/es.object.t...
vue 引用G2/G6 注意（Uncaught SyntaxError: Identifier ‘e‘ has already been declared）
Geek-Haoyu
04-08 849
vue 打包 Uncaught SyntaxError: Identifier 'e' has already been declared
@antv/g6在ie11报语法错误，兼容处理
weixin_44729896的博客
01-05 2446
错误分析: 上图清晰明了指出@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中，直接在
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 是一个流行的前端JavaScript框架的最新版本，它提供了许多改进和优化，包括更好的性能、更简洁的API以及对TypeScript的深入支持。Vue3引入了Composition API，这是一个全新的组织组件逻辑的方式，允许开发者更...
记录一个问题：G6和vite的兼容性问题
weixin_39492106的博客
03-11 1804
G6 antd vue3 vite
前端踩坑记录，有关antv G6和vite兼容性问题
sha虫剂的博客
02-22 3108
vite+G6打包报错，开发环境无问题，打包后相关页面打不开
React中使用Antv G6报错invalid container解决方法
qq_36560180的博客
06-04 9322
在react项目中使用antv G6的时候出现了invalid container的错误，各种找解决方案以及在GitHub上找G6的项目，花费了一些时间但是没有找到解决方法，不得不吐槽一下antv官网给出的例子，没有一个完整的demo，文档很不友好。 最后发现一篇博客，博客中说在componentDidMount的时候做图形的初始化，这个时候恍然大悟，我之前直接把初始化的代码写在render中，而...
npm install --save @antv/g6报错
zhangxiaodui的博客
10-19 2816
npm install --save @antv/g6报如下错误 CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException FullyQualifiedErrorId : UnrecognizedToken 从错误中得知源文本中存在无法识别的标记 解决办法 npm install --save '@antv/g6' 给依赖包外层加单引号或者双引号 ...
(g6)紧凑树添加节点数据调取内部方法报错
nyf_unknow的博客
12-05 218
错误写法： 正确写法：
在vue3使用AntV G6 (图可视化引擎)
kiku
12-18 8567
官网地址： G6 是一个图可视化引擎 一、在项目中使用 NPM 包引入 Step 1: 使用命令行在项目目录下执行以下命令： npm install --save @antv/g6 Step 2: 在需要用的 G6 的 vue 文件中导入： import G6 from '@antv/g6'; 二、绘制案例 Step 1 创建容器 需要在 HTML 中创建一个用于容纳 G6 绘制的图的容器，通常为 div 标签。G6 在绘制时会在该容器下追加 canvas 标签，然后将图绘制在其中。 // 挂载节点
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、付费专栏及课程。

余额充值