vue引入highcharts，启动项目后报错，分享解决思路

于 2024-03-13 17:06:39 发布
阅读量574 收藏 8
点赞数 9
文章标签： npm vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56058658/article/details/136684686
版权

最近在启动老项目的时候遇到了这个报错，找了半天原因，发现是由于引入highcharts导致的报错，于是开始查找如何引入highcharts，最终发现和引入没有关系，而是highcharts的安装依赖版本导致，查看npm上面highcharts的安装版本如下

 

报错是安装了高版本的V11.4.0导致的，改成V7.2.2版本再重启项目就可以了

分享比较简单，但是探索和尝试的过程还是比较漫长的，另外在这个过程中还遇到一个问题就是

92% chunk asset optimization UglifyJsPlugin

遇到这个会一致卡在这里，停留好久才会继续运行，这也导致了开发的时候，修改保存之后页面更新地特别慢，有解决方案地家人们可以私信我，谢谢~

满身花雨
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目优化
weixin_45933950的博客
04-29 308
vue打包上线移除 consols 方法1、 安装： npm install babel-plugin-transform-remove-console 然后配置在项目根目录下找 babel.config文件夹中找 再次运行 npm run build 命令，就不会有此类型的警告了 遇到的问题，安装并配置好之后无论运行 npm run build 或 npm run serve 都...
在vue项目中引入highcharts图表的方法
10-17
今天小编就为大家分享一篇关于在vue项目中引入highcharts图表的方法，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
解决vue 引入子组件报错的问题
10-18
今天小编就为大家分享一篇解决vue 引入子组件报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在vue项目中引入highcharts图表的方法(详解)
08-27
下面小编就为大家分享一篇在vue项目中引入highcharts图表的方法(详解)，具有很好的参考价值，希望对大家有所帮助
解决vue 项目引入字体图标报错、不显示等问题
12-02
问题：在项目开发时使用字体图标，发现两个问题； 1、出现报错： 解决方法为：把字体引入方式改为绝对路径 2、不报错，但是不显示图标字体，出现方框 原因可能有两种： ①没在用到的地方引入字体的样式文件②你使用的是后缀名为 .styl 文件 ①的解决办法是在用到的地方引入字体的样式文件（全局引入的话需要从app.vue里引入） ②这个就是我遇到的问题，浪费了我好几分钟！！！微笑 解决办法是把font.styl改为font.css 记得在用到图标的地方引入 问题原理后续再写。 以上这篇解决vue 项目引入字体图标报错、不显示等问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希
vue项目引入highcharts方法，以及遇到的坑
yongyafang123的博客
11-01 1万+
vue项目引入highcharts步骤： 第一步: 安装 highcharts 命令如下： npm install highcharts --save 第二步： 编写公用的组件： 在src ------> components (组件目录下)新建 charts.vue 页面 代码如下： <template> <div class="x-bar"> ...
Vue使用hightcharts中的韦恩图及报错解决方法
weixin_49813550的博客
09-22 1810
vue使用hightcharts韦恩图 一、首先安装两个依赖 npm install highcharts-vue npm install highcharts --save 二、在main.js中引入 import HighchartsVue from "highcharts-vue"; Vue.use(HighchartsVue); 三、在组件里面调用 <template> <div class="hello"> <div id="container"&gt
npm install安装失败 error D:\xxx\xxx\node_modules\node-sass: Command failed. Exit code: 1
qq_45489665的博客
03-14 6601
报错完整信息如下： error D:\xxx\xxx\node_modules\node-sass: Command failed. Exit code: 1 Command: node scripts/build.js Arguments: Directory: D:\xxx\xxx\node_modules\node-sass Output: Binary found at D:\software\nodesass\win32-x64-72_binding.node Testing binary Bin
Highcharts插件常见问题及解决办法
幸福的使者
07-22 1742
在jsp中使用Highchart的步骤： 第一步：引入highchart必需的js文件 1 2 3 4 5 6 7 8 9 10 11 12 <!-- -- jquery的js要在引入highchart插件的js之前引入 ----> <script src="js/
vue3.0项目修改文件后，总是 92% chunk asset optimization TerserPlugin，卡住不动
晚秋的专栏
07-29 4308
vue3.0项目修改文件后，总是 92% chunk asset optimization TerserPlugin，卡住不动解决方式
UglifyJS Webpack Plugin 插件
qq_40224863的博客
12-27 2435
目的：该插件用来缩小（压缩优化）js文件 要求：此模块至少需要Node v6.9.0和Webpack v4.0.0。 入门：需要安装该插件 $ npm安装uglifyjs-webpack-plugin --save-dev 将插件添加到您的webpack配置中。 webpack.config.js或者vue.config.js中的基本配置： const UglifyJsPlugin = requ...
webpack4配置详解之常用插件分享
weixin_34115824的博客
11-19 191
2019独角兽企业重金招聘Python工程师标准>>> ...
highcharts使用韦恩图报错解决Error in mounted hook: “Error: Highcharts error #17:missingModuleFor: venn（详细步骤）
weixin_41277748的博客
04-12 7295
我由于在vue项目中刚好要使用韦恩图想用highcharts然后按照步骤 1、npm install highcharts --save 2、创建组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> ...
webpack js压缩插件UglifyJS、ParallelUglifyPlugin.md
黄彪博客
02-12 4347
文章目录文章参考UglifyJS 作用webpack.optimize.UglifyJsPlugin has been removed, please use config.optimizat?webpack4.x 配置 uglifyjs-webpack-pluginmode 对 UglifyJSPlugin的影响ParallelUglifyPlugin为什么要使用 ParallelUglifyP...
highchart的图表出不来几种情况总结
学无止境
12-22 7991
1)  Js的引入顺序不正确，导致highchart的图表出不来， 因为Highchart插件中用到了jquery，jquery的js要在引入highchart的js之前引入，否则当会导致当加载highchart插件用到的js时，找不到jquery的js，报出某个js的函数不合法，Higchart图表无法显示。 2）后台传入的JSON格式数据，需要用eval函数处理一下，否则图表也无法
npm本地安装highcharts失败，报错node_modules下某一文件找不到路径。
龙丨行的博客
12-31 1471
在vue项目中需要用到highcharts,通过npm install highcharts --save进行安装，结果报错某个文件没找到（明天贴截图）。 遇到这种情况直接用cnpm重装一下就好。即(cnpm install highcharts --save)。 ...
webpack中遇到 ERROR in ./node_modules/***的解决办法
热门推荐
qq_41672008的博客
04-09 8万+
如果在使用webpack编译时遇到如下情况： 可以看见遇见一片红，但是只要关注开头，就是ERROR in ./node_modules/***，于是可以想到你的node_modules出现了问题， 可能你的包出现问题，但是实际上包出现问题的几率不大，那什么导致了node_modules出现了问题？ 解决方法：原因基本是你在使用babel的时候，babel的文件匹配规则出现了错误，打...
Vue Cli 3 打包配置--自动忽略 console.log 语句
前端求内推-北京/天津/远程
04-22 723
下载插件 npm i -D uglifyjs-webpack-plugin 在 vue.config.js 引入使用 const UglifyJsPlugin = require('uglifyjs-webpack-plugin') module.exports = { configureWebpack: { plugins: [ new Ugli...
vue3创建项目启动报错
最新发布
08-18
根据您提供的引用内容，您在创建Vue3项目时遇到了启动报错的问题。错误信息是"vue-loader requires @vue/compiler-sfc to be present in the dependency tree"。解决这个问题的方法如下： 首先，进入您创建的Vue3项目文件夹。使用命令行工具（如终端或命令提示符）进入该文件夹的路径，例如： cd .\vue3_test\ 接下来，卸载掉之前报错的vue-loader。使用以下命令： npm uninstall vue-loader-v16 然后，重新安装vue-loader。使用以下命令： npm i vue-loader-v16 这样，您就完成了重新安装vue-loader的步骤。 该错误通常是因为@vue/compiler-sfc这个依赖项没有被正确添加到项目中所导致的。您可以使用以下命令手动安装@vue/compiler-sfc： npm i @vue/compiler-sfc 这样，您就解决了报错问题。重新运行您的Vue3项目，应该可以正常启动了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue3成功创建项目后 run serve启动项目报错](https://blog.csdn.net/qq_53810245/article/details/123247521)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值