electronvue引入squlite3模块，并解决UncaughtError:cannotfindmodule的问题

本文转载自https://juejin.im/post/5b3ad6b651882562540314f0

亲测有效

【简介】

Electron是一个基于vue.js的新框架&＃xff0c;它可以构建桌面应用。官方提供的electron-vue模板&＃xff0c;干净有效&＃xff0c;方便开发。这篇文章将介绍我在搭建electron-vue项目并引入sqlite3模块遇到的问题及解决方法。

一、步骤

1.使用webStrom开发并搭建vue.js环境&＃xff0c;链接如下&＃xff1a;http://blog.csdn.net/nero__a/article/details/62228646

2.本地安装VS2015&＃xff08;推荐安装VS2013&＃xff09;&＃xff0c;链接如下&＃xff1a;https://www.ithome.com/html/win10/164028.htm

3.下载python2.7.11&＃xff0c;并搭建环境变量&＃xff08;自行百度&＃xff09;&＃xff1a;https://www.python.org/downloads/

4.由于我们的项目会用到原生的node模块&＃xff0c;比如sqlite3&＃xff0c;用官网的三种引入方式可能会出现问题。在引入sqlite3依赖时&＃xff0c;请参考一下链接&＃xff1a;

https://github.com/SimulatedGREG/electron-vue/issues/315


确保脚手架等vue环境搭建完毕&＃xff0c;然后运行以下命令&＃xff1a;

【vue init simulatedgreg/electron-vue E:\js\project\electron】


进入【E:\js\project\electron】文件夹&＃xff0c;运行命令行

【npm install】【npm install sqlite3 --save】【npm run dev】


如果运行后&＃xff0c;报如下错误&＃xff1a;

【在此解决方案中一次生成一个项目。若要启用并行生成&＃xff0c;请添加“/m”开关。C:\Program Files (x86)\MSBuild\Microsoft.Cpp\v4.0\V140\Platforms\x64\PlatformToolsets\v140\Toolset.targets(36,5): error MSB8036: The Windows SDK version 8.1 was not found. Install the required version of Windows SDK or change the SDK version in the project property pages or by right-clicking the solution and selecting "Retarget solution". [E:\js\project\electron\node_modules\sqlite3\build\deps\action_before_build.vcxproj]】


如果报错内容关于SDK version8.1&＃xff0c;则可能是VS2015使用的是SDK导致的。请下载并安装新的SDK10和SDK8.1&＃xff0c;链接如下&＃xff1a;

SDK10&＃xff1a;https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdkSDK8&＃xff1a;https://developer.microsoft.com/zh-cn/windows/downloads/windows-8-1-sdk


安装后&＃xff0c;运行第4步的第3行语句【npm install sqlite3 --save】重新依赖sql3。如果关于SDK或者WDK还有问题&＃xff0c;则参考&＃xff1a; http://www.cnblogs.com/fundou/p/7183863.html

5.测试模块是否正确引用。

使用开发软件打开该项目&＃xff0c;在main.js或LandingPage.vue加载时&＃xff0c;加入sql数据库的代码&＃xff0c;如下&＃xff1a;

【var sqlite3 &＃61; require(&＃39;sqlite3&＃39;).verbose();】【var db &＃61; new sqlite3.Database(&＃39;:memory:&＃39;);】


只需要引入数据库即可。然后运行【npm run dev】&＃xff0c;如果在执行到相关数据库语句时没有报错&＃xff0c;则依赖sqlite3模块成功。

二、错误解决

如果出现【Uncaught Error:cannot find module】的问题&＃xff0c;如图&＃xff1a;

提示在node_modules\sqlite3\lib\binding\electroon-v1.4-win32-x64下cannot find mudule,去binding下找不到electroon-v1.4-win32-x64文件夹&＃xff0c;原因是npm install时加载package.json是会在node_modules下安装原生sqlite3模块&＃xff0c;binding下会产生一个类似node-v51-win32-x64的文件夹&＃xff0c;需要做的是编译产生node_modules\sqlite3\lib\binding\electroon-v1.4-win32-x64路径&＃xff0c;手动修改并不能解决问题。需要重新手动编译。打红线的部分请记下来&＃xff0c;后面会用上。

这时候要注意了&＃xff0c;如果你有vpn&＃xff0c;或者访问外网的速度很快&＃xff0c;可以进入【node_modules\sqlite3】文件夹下运行命令行直接使用如下语句&＃xff1a;

【npm install nan --save 】【node-gyp configure --module_name&＃61;node_sqlite3 --module_path&＃61;../lib/binding/electron-v1.4-win32-x64 】【node-gyp rebuild --target&＃61;1.4.13 --arch&＃61;x64 --target_platform&＃61;win32 --dist-url&＃61;https://atom.io/download/electron/ --module_name&＃61;node_sqlite3 --module_path&＃61;../lib/binding/electron-v1.4-win32-x64】


对于后面两个指令&＃xff0c;不同的电脑指令可能不太一样&＃xff0c;后面会讲如果确认自己的指令。

大多数人像我一样&＃xff0c;浏览器访问https://atom.io/download/electron/没问题&＃xff0c;也可以下载&＃xff0c;但是用cmd命令行直接使用上面的编译语句&＃xff0c;在经过超时间的链接后&＃xff0c;会报错。那么我们可以试一下另一个方式&＃xff1a;

由于手动编译的过程中&＃xff0c;会使用到npm-gyp这个模块&＃xff0c;该模块是从https://atom.io/download/electron/这个地址down下来的&＃xff0c;其服务器在国外&＃xff0c;链接时间太长会导致编译失败&＃xff0c;所以我们要把npm-gyp的下载地址转到淘宝的镜像上。

如果你是windows&＃xff0c;在项目的文件夹下执行如下语句&＃xff1a;

【set NVM_NODEJS_ORG_MIRROR&＃61;http://npm.taobao.org/mirrors/node】【set NVM_IOJS_ORG_MIRROR&＃61;http://npm.taobao.org/mirrors/iojs】


如果是mac&＃xff0c;set换成export即可。

目的在于重新指向链接&＃xff0c;然后安装npm-gyp模块&＃xff1a;

【node-gyp-install】


在node-gyp模块下载完毕后&＃xff0c;我们回到上面报错的信息上&＃xff0c;重新看这个错误&＃xff1a;

按照我们的分析&＃xff0c;我们的目的要在【binding】文件夹下产生对应的问题件。所以我们进入【node_modules\sqlite3】文件夹&＃xff0c;运行以下命令&＃xff1a;

【npm install nan --save 】【node-gyp configure --module_name&＃61;node_sqlite3 --module_path&＃61;../lib/electron-v1.7-win32-x64】


注意这里最后【\binding】后的部分&＃xff0c;一定要跟红线上的路径保持一致&＃xff08;本人的是1.7&＃xff0c;这里用的图是网上找的&＃xff0c;举例用的&＃xff0c;所以不匹配&＃xff0c;大家不用疑惑&＃xff0c;这里匹配好路径就好&＃xff09;

运行完毕后&＃xff0c;执行下面的命令&＃xff1a;

【node-gyp rebuild --target&＃61;1.6.5 --arch&＃61;x64 --target_platform&＃61;win32 --dist-url&＃61;https://npm.taobao.org/mirrors/atom-shell --module_name&＃61;node_sqlite3 --module_path&＃61;../lib/binding/electron-v1.7-win32-x64】


以上命令行是编译的关键&＃xff0c;–target代表electron的版本号&＃xff0c;不是package.json的electron版本号&＃xff0c;访问https://npm.taobao.org/mirrors/atom-shell&＃xff0c;查看最新的版本并将其设为target即可&＃xff1b;–arch是cpu的位数&＃xff1b;–dist-url指定了electron header的下载来源&＃xff0c;像之前说的一样&＃xff0c;如果你的外网访问速度很快&＃xff0c;使用【https://atom.io/download/electron/】也可以。另外注意&＃xff0c;path一定要一致。

执行完毕后&＃xff0c;运行【npm run dev】即可。

如果执行到对应的sql语句还是报错&＃xff0c;并错误原因跟【NODE_MODULE_VERSION】有关&＃xff0c;大意是version不匹配&＃xff0c;则运行以下命令&＃xff1a;

【npm install --save-dev electron-rebuild】MAC&＃xff1a;【./node_modules/.bin/electron-rebuild】Windowns&＃xff1a;【.\node_modules\.bin\electron-rebuild.cmd】


重新并编译即可。

完毕后再运行【npm run dev】&＃xff0c;测试sql语句&＃xff0c;这样应该就没问题了。

三、总结

总结&＃xff1a;安装sqlite3模块&＃xff0c;Windows系统可能会出问题&＃xff0c;无法在对应的path生成正确的文件&＃xff0c;我们需要手动编译。但是手动编译的时候会用到npm-gyp模块&＃xff0c;如果是在国内没有使用vpn&＃xff0c;则安装官网的编译方式可能会失败&＃xff0c;所以我们将下载地址指向淘宝镜像。以上过程就是解决【cannot find mudule】问题的思路。

解决该问题中&＃xff0c;参考了以下资料&＃xff1a;

【https://github.com/SimulatedGREG/electron-vue/issues/315】&＃xff08;拉取electron-vue并依赖sqlite3&＃xff09;【http://blog.csdn.net/lord_l/article/details/53996828】&＃xff08;cannot find mudule问题产生的原理和解决思路&＃xff09;【http://blog.csdn.net/cut001/article/details/68922780】&＃xff08;解决npm-gyp模块拉取不到而使用淘宝镜像的问题&＃xff09;【https://www.npmjs.com/package/node-gyp-install】&＃xff08;npm-gyp模块的拉取规则&＃xff09;【https://stackoverflow.com/questions/42616008/node-module-version-conflict-when-installing-modul

作者&＃xff1a;silentpride
链接&＃xff1a;https://juejin.im/post/5b3ad6b651882562540314f0
来源&＃xff1a;掘金
著作权归作者所有。商业转载请联系作者获得授权&＃xff0c;非商业转载请注明出处。