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

Posted 简一_hz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了electron-vue引入squlite3模块,并解决Uncaught Error:cannot find module的问题相关的知识,希望对你有一定的参考价值。

本文转载自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】的问题,如图:

 

 

 

提示在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模块下载完毕后,我们回到上面报错的信息上,重新看这个错误:

 

 

 

按照我们的分析,我们的目的要在【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
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

以上是关于electron-vue引入squlite3模块,并解决Uncaught Error:cannot find module的问题的主要内容,如果未能解决你的问题,请参考以下文章

2022-03-02 关于electron-vue中引入web worker的几种方法尝试

使用electron-vue环境搭建

TP5.1让验证码在另外的项目(Electron-vue)里面使用

Electron-vue在发送请求时携带cookie

electron-vue 项目启动动态获取配置文件中的后端服务地址

electron-vue中点击按钮,实现打开程序目录里面的某个文件