【簡(jiǎn)介】
????Electron是一個(gè)基于vue.js的新框架汽绢，它可以構(gòu)建桌面應(yīng)用吗跋。官方提供的electron-vue模板，干凈有效宁昭，方便開發(fā)跌宛。這篇文章將介紹我在搭建electron-vue項(xiàng)目并引入sqlite3模塊遇到的問題及解決方法。
一积仗、步驟
? ? 1.使用webStrom開發(fā)并搭建vue.js環(huán)境疆拘，鏈接如下：http://blog.csdn.net/nero__a/article/details/62228646
????2.本地安裝VS2015（推薦安裝VS2013），鏈接如下：https://www.ithome.com/html/win10/164028.htm
????3.下載python2.7.11斥扛，并搭建環(huán)境變量（自行百度）：https://www.python.org/downloads/
? ??4.由于我們的項(xiàng)目會(huì)用到原生的node模塊入问，比如sqlite3，用官網(wǎng)的三種引入方式可能會(huì)出現(xiàn)問題稀颁。在引入sqlite3依賴時(shí)芬失，請(qǐng)參考一下鏈接：https://github.com/SimulatedGREG/electron-vue/issues/315
? ? 確保腳手架等vue環(huán)境搭建完畢，然后運(yùn)行以下命令：
? ? 【vue init simulatedgreg/electron-vue E:\js\project\electron】
? ? 進(jìn)入【E:\js\project\electron】文件夾匾灶，運(yùn)行命令行
????【npm install】
????【npm install sqlite3 --save】
????【npm run dev】
? ? 如果運(yùn)行后棱烂，報(bào)如下錯(cuò)誤：
【在此解決方案中一次生成一個(gè)項(xiàng)目。若要啟用并行生成阶女，請(qǐng)?zhí)砑印?m”開關(guān)颊糜。
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]】
? ??如果報(bào)錯(cuò)內(nèi)容關(guān)于SDK version8.1哩治，則可能是VS2015使用的是SDK導(dǎo)致的。請(qǐng)下載并安裝新的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
? ??安裝后业筏，運(yùn)行第4步的第3行語句【npm install sqlite3 --save】重新依賴sql3。如果關(guān)于SDK或者WDK還有問題鸟赫，則參考：?http://www.cnblogs.com/fundou/p/7183863.html
????5.測(cè)試模塊是否正確引用蒜胖。
????使用開發(fā)軟件打開該項(xiàng)目，在main.js或LandingPage.vue加載時(shí)抛蚤，加入sql數(shù)據(jù)庫(kù)的代碼台谢，如下：
????【var sqlite3 = require('sqlite3').verbose();】
????【var db = new sqlite3.Database(':memory:');】
????只需要引入數(shù)據(jù)庫(kù)即可。然后運(yùn)行【npm run dev】岁经，如果在執(zhí)行到相關(guān)數(shù)據(jù)庫(kù)語句時(shí)沒有報(bào)錯(cuò)朋沮，則依賴sqlite3模塊成功。
二缀壤、錯(cuò)誤解決
? ? 如果出現(xiàn)【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時(shí)加載package.json是會(huì)在node_modules下安裝原生sqlite3模塊塘慕，binding下會(huì)產(chǎn)生一個(gè)類似node-v51-win32-x64的文件夾骑脱，需要做的是編譯產(chǎn)生node_modules\sqlite3\lib\binding\electroon-v1.4-win32-x64路徑，手動(dòng)修改并不能解決問題苍糠。需要重新手動(dòng)編譯。打紅線的部分請(qǐng)記下來啤誊，后面會(huì)用上岳瞭。
????這時(shí)候要注意了，如果你有vpn蚊锹，或者訪問外網(wǎng)的速度很快瞳筏，可以進(jìn)入【node_modules\sqlite3】文件夾下運(yùn)行命令行直接使用如下語句：
????【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】
? ? 對(duì)于后面兩個(gè)指令，不同的電腦指令可能不太一樣牡昆，后面會(huì)講如果確認(rèn)自己的指令姚炕。
? ??大多數(shù)人像我一樣，瀏覽器訪問https://atom.io/download/electron/沒問題丢烘，也可以下載柱宦，但是用cmd命令行直接使用上面的編譯語句，在經(jīng)過超時(shí)間的鏈接后播瞳，會(huì)報(bào)錯(cuò)掸刊。那么我們可以試一下另一個(gè)方式：
? ? 由于手動(dòng)編譯的過程中，會(huì)使用到npm-gyp這個(gè)模塊赢乓，該模塊是從https://atom.io/download/electron/這個(gè)地址down下來的忧侧，其服務(wù)器在國(guó)外石窑，鏈接時(shí)間太長(zhǎng)會(huì)導(dǎo)致編譯失敗，所以我們要把npm-gyp的下載地址轉(zhuǎn)到淘寶的鏡像上蚓炬。
????如果你是windows松逊，在項(xiàng)目的文件夾下執(zhí)行如下語句：
????【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模塊下載完畢后，我們回到上面報(bào)錯(cuò)的信息上熄捍，重新看這個(gè)錯(cuò)誤：
? ? 按照我們的分析烛恤，我們的目的要在【binding】文件夾下產(chǎn)生對(duì)應(yīng)的問題件。所以我們進(jìn)入【node_modules\sqlite3】文件夾余耽，運(yùn)行以下命令：
? ??【npm install nan --save 】
????【node-gyp configure --module_name=node_sqlite3 --module_path=../lib/electron-v1.7-win32-x64】
????注意這里最后【\binding】后的部分缚柏，一定要跟紅線上的路徑保持一致（本人的是1.7，這里用的圖是網(wǎng)上找的碟贾，舉例用的币喧，所以不匹配，大家不用疑惑袱耽，這里匹配好路徑就好）
????運(yùn)行完畢后杀餐，執(zhí)行下面的命令：
????【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】
????以上命令行是編譯的關(guān)鍵，–target代表electron的版本號(hào)朱巨，不是package.json的electron版本號(hào)史翘，訪問https://npm.taobao.org/mirrors/atom-shell，查看最新的版本并將其設(shè)為target即可冀续；–arch是cpu的位數(shù)琼讽；–dist-url指定了electron header的下載來源，像之前說的一樣洪唐，如果你的外網(wǎng)訪問速度很快钻蹬，使用【https://atom.io/download/electron/】也可以。另外注意凭需，path一定要一致问欠。
????執(zhí)行完畢后，運(yùn)行【npm run dev】即可粒蜈。
????如果執(zhí)行到對(duì)應(yīng)的sql語句還是報(bào)錯(cuò)顺献，并錯(cuò)誤原因跟【NODE_MODULE_VERSION】有關(guān)，大意是version不匹配薪伏，則運(yùn)行以下命令：
? ??【npm install --save-dev electron-rebuild】
????MAC：【./node_modules/.bin/electron-rebuild】
????Windowns：【.\node_modules\.bin\electron-rebuild.cmd】
????重新并編譯即可滚澜。
????完畢后再運(yùn)行【npm run dev】，測(cè)試sql語句，這樣應(yīng)該就沒問題了设捐。
????三借浊、總結(jié)
????總結(jié)：安裝sqlite3模塊，Windows系統(tǒng)可能會(huì)出問題萝招，無法在對(duì)應(yīng)的path生成正確的文件蚂斤，我們需要手動(dòng)編譯。但是手動(dòng)編譯的時(shí)候會(huì)用到npm-gyp模塊槐沼，如果是在國(guó)內(nèi)沒有使用vpn曙蒸，則安裝官網(wǎng)的編譯方式可能會(huì)失敗，所以我們將下載地址指向淘寶鏡像岗钩。以上過程就是解決【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問題產(chǎn)生的原理和解決思路）
【http://blog.csdn.net/cut001/article/details/68922780】（解決npm-gyp模塊拉取不到而使用淘寶鏡像的問題）
【https://www.npmjs.com/package/node-gyp-install】（npm-gyp模塊的拉取規(guī)則）
【https://stackoverflow.com/questions/42616008/node-module-version-conflict-when-installing-modules-for-electron】（解決NODE_MODULE_VERSION版本不匹配的問題）
