electron-vue引入squlite3模块，并解决Uncaught Error:cannot find module的问题

青旅半醒 2024-04-19 07:56 42阅读 0赞

本文转载自[https://juejin.im/post/5b3ad6b651882562540314f0][https_juejin.im_post_5b3ad6b651882562540314f0]

亲测有效

【简介】

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

一、步骤

1.使用webStrom开发并搭建vue.js环境，链接如下：http://blog.csdn.net/nero\_\_a/article/details/62228646

2.本地安装VS2015（推荐安装VS2013），链接如下：https://www.ithome.com/html/win10/164028.htm

3.下载python2.7.11，并搭建环境变量（自行百度）：https://www.python.org/downloads/

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

https://github.com/SimulatedGREG/electron-vue/issues/315
    复制代码

确保脚手架等vue环境搭建完毕，然后运行以下命令：

【vue init simulatedgreg/electron-vue E:\js\project\electron】
    复制代码

进入【E:\\js\\project\\electron】文件夹，运行命令行

【npm install】
    
    【npm install sqlite3 --save】
    
    【npm run dev】
    复制代码

如果运行后，报如下错误：

【在此解决方案中一次生成一个项目。若要启用并行生成，请添加“/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，则可能是VS2015使用的是SDK导致的。请下载并安装新的SDK10和SDK8.1，链接如下：

SDK10：https://developer.microsoft.com/en-us/windows/downloads/windows-10-sdk
    
    SDK8：https://developer.microsoft.com/zh-cn/windows/downloads/windows-8-1-sdk
    复制代码

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

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

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

【var sqlite3 = require('sqlite3').verbose();】
    
    【var db = new sqlite3.Database(':memory:');】
    复制代码

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

二、错误解决

如果出现【Uncaught Error:cannot find module】的问题，如图：

![format_png][]

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

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

【npm install nan --save 】
    
    【node-gyp configure --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.4-win32-x64 】
    
    【node-gyp rebuild --target=1.4.13 --arch=x64 --target_platform=win32 --dist-url=https://atom.io/download/electron/ --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.4-win32-x64】
    复制代码

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

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

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

如果你是windows，在项目的文件夹下执行如下语句：

【set NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node】
    
    【set NVM_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs】
    复制代码

如果是mac，set换成export即可。

目的在于重新指向链接，然后安装npm-gyp模块：

【node-gyp-install】
    复制代码

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

![format_png 1][]

按照我们的分析，我们的目的要在【binding】文件夹下产生对应的问题件。所以我们进入【node\_modules\\sqlite3】文件夹，运行以下命令：

【npm install nan --save 】
    
    【node-gyp configure --module_name=node_sqlite3 --module_path=../lib/electron-v1.7-win32-x64】
    复制代码

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

运行完毕后，执行下面的命令：

【node-gyp rebuild --target=1.6.5 --arch=x64 --target_platform=win32 --dist-url=https://npm.taobao.org/mirrors/atom-shell --module_name=node_sqlite3 --module_path=../lib/binding/electron-v1.7-win32-x64】
    复制代码

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

执行完毕后，运行【npm run dev】即可。

如果执行到对应的sql语句还是报错，并错误原因跟【NODE\_MODULE\_VERSION】有关，大意是version不匹配，则运行以下命令：

【npm install --save-dev electron-rebuild】
    
    MAC：【./node_modules/.bin/electron-rebuild】
    
    Windowns：【.\node_modules\.bin\electron-rebuild.cmd】
    复制代码

重新并编译即可。

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

三、总结

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

解决该问题中，参考了以下资料：

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

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

[https_juejin.im_post_5b3ad6b651882562540314f0]: https://juejin.im/post/5b3ad6b651882562540314f0
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC83LzMvMTY0NWRkZDkwYTJkYThiMT9pbWFnZVZpZXcyLzAvdy8xMjgwL2gvOTYwL2Zvcm1hdC93ZWJwL2lnbm9yZS1lcnJvci8x?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC83LzMvMTY0NWRkZGJiNzI3YWFiZj9pbWFnZVZpZXcyLzAvdy8xMjgwL2gvOTYwL2Zvcm1hdC93ZWJwL2lnbm9yZS1lcnJvci8x?x-oss-process=image/format,png