受限于墻以及網(wǎng)絡環(huán)境，很多人在嘗試打包electron程序時都會碰到各種問題，下面以electron-vue模板為例（打包使用electron-builder），windows環(huán)境下，一步步解決打包時所遇到的錯誤。

執(zhí)行npm run build，下面每一步都可能因網(wǎng)絡原因而報錯，請參照對應報錯按要求手動下載對應工具。

• 因版本原因，文中下載地址僅作參考，請從報錯信息中拷貝正確下載地址。
• 用迅雷一般都能從github上下載成功
• 以下所說目錄若不存在，請手動新建（其實只要執(zhí)行到某一步，就會自動生成該目錄），目錄中已有的緩存文件可以刪掉

1.electron-v1.8.2-win32-x64.zip下載失敗

image.png

打開https://registry.npmmirror.com/binary.html?path=electron/找到對應版本，下載如下兩個文件：

• electron-v1.8.2-win32-x64.zip
• SHASUMS256.txt

放到目錄：C:\Users\windows用戶\AppData\Local\electron\Cache，并將.txt文件名加上版本號：

• electron-v1.8.2-win32-x64.zip
• SHASUMS256.txt-1.8.2

或者網(wǎng)上有人說可以從淘寶鏡像站下載：https://npm.taobao.org/mirror...

2.app-builder-v0.6.1-x64.7z

image.png

下載地址如(請拷貝錯誤信息中的path)：https://github.com/develar/ap...

在目錄C:\Users\windows用戶\AppData\Local\electron-builder\cache\app-builder下，新建文件夾app-builder-v0.6.1-x64（即報錯信息中文件名），將下載文件解壓到此文件夾內

下面三個文件操作同步驟2

3.winCodeSign-1.9.0.7z

4.nsis-3.0.1.13.7z

5.nsis-resources-3.3.0.7z

最終文件夾如下：

image.png

經過以上艱難操作，至此所有可能下載失敗的包都有了，重新執(zhí)行build命令，nice打包成功！

到build文件夾安裝下我們的exe文件，打開程序后......什么鬼！程序白屏？？？明明dev模式下都是好好的！

莫急，咱們再找到配置文件.electron-vue/webpack.renderer.config.js

let whiteListedModules = ['vue']
//將上面這句改為
let whiteListedModules = ['vue' , 'vue-router', 'axios', 'vuex', 'vue-electron']

即把dependencies依賴全部加入白名單，或者直接注釋...Object.keys(dependencies || {}).filter(d => !whiteListedModules.includes(d))這句話，具體請查看issuenpm run build 打出來的包，安裝后，什么都不顯示，白屏？里別人提供的解決辦法，可能以后更新會修改這個bug。

再次npm run build打包，安裝exe后應該就正常了。