Vue项目中使用opencv.js报错记录

网上关于vue中使用opencvjs的例子少之又少，无奈之下只能自己琢磨研究一下。开此贴来记录自己的探索过程，希望最后可以顺利完成课题。

一开始是尝试官网的方法，直接引入编译好的opencv.js文件，在index.html里面直接放置官网的例子，然后成功了，特别开心，以为自己已经攻克难关可以开始准备项目了，还跟导师汇报说技术难关已经解决了，然而在我happy了一天晚上回来准备给他应用到vue项目中发现这玩意怎么跟在html文件中不一样呢？？？因为是前端小白，所以我在网上找了很多方法，试了几个靠谱的，结果最后都会报错说cv未定义，再三思考，感觉是引入的时候出的差错，于是试着在命令行中直接用npm去下载官方的包

npm install opencv4js

安装好之后再包文件夹里看到了一个跟我之前手动复制到项目中的opencv.js一样的文件，根据官方（https://www.npmjs.com/package/opencv4js）给的方法对其进行引入

let cv = require('opencv4js');

之后还对cv进行了打印，不出意外的报错了，毕竟跟上面一串的import引入队形很不一致，诶？？那不然我试试import导入？？

于是

import cv from "opencv4js";
console.log(cv);

怀着忐忑的心情，切到了测试浏览器！！！！！！！居然成功了！！！！！哈哈哈哈哈开心！！！

 嘻嘻嘻 还是开心！！！

总结一下vue导入opencvjs步骤

1.命令行中 npm install opencv4js

2.import cv from "opencv4js";

3.按照官网文档正常使用即可

-------------------------------------------------------------------------------------------------------------------------

今天来公司换了个电脑跑，结果卡在了下面的位置

 我就知道有点小不妙，结果没一会，果然给我报错了，具体如下

<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 000001D81A25C5C1]
Security context: 0x00a32b09e6e9 
    1: /* anonymous */ [0000015D0152DFD1] [E:\mymymy\????\vue-rem\node_modules\acorn\dist\acorn.js:~4376] [pc=000001D81A54B314](this=0x03b5c9726f59 ,type=0x00cd0b077919 ,val=0x02d6794826f1 )
    2: arguments adaptor frame: 1->2
    3: /* anonymous */ [0000015D01528461] [E:\mymymy\?...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF6CAE0F04A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+5114
 2: 00007FF6CADEA0C6 node::MakeCallback+4518
 3: 00007FF6CADEAA30 node_module_register+2032
 4: 00007FF6CB0720EE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF6CB07201F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF6CB592BC4 v8::internal::Heap::MaxHeapGrowingFactor+9556
 7: 00007FF6CB589C46 v8::internal::ScavengeJob::operator=+24310
 8: 00007FF6CB58829C v8::internal::ScavengeJob::operator=+17740
 9: 00007FF6CB590F87 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF6CB591006 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF6CB14CDB7 v8::internal::Factory::NewFillerObject+55
12: 00007FF6CB1E2CC6 v8::internal::WasmJs::Install+29414
13: 000001D81A25C5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\asus\AppData\Roaming\npm-cache\_logs\2021-09-06T03_05_50_291Z-debug.log

折腾了好久，最后百度

Ineffective mark-compacts near heap limit Allocation failed

让我找到了解决方案，参考的这一篇

https://www.jianshu.com/p/410e826506be

这个博客提供了好几种解决方法，最后我选择了 以下方法

 但是运行的时候，又报了新的错误，具体情况如下面这篇博客所示，就不重复描述了，最后也是按照这篇博客提供的方法，成功解决了这个问题，虽然不知道原理，希望有知道原理的大佬们给我指点一下。

https://blog.csdn.net/lucky_Zeng/article/details/108622002

至此，问题顺利解决，项目可以在公司电脑跑起来啦！！欣慰欣慰

------------------------------------------------------------------------------------------2021.09.06 11:48