electron-vue的正確build姿式

問題描述

受限於牆以及網絡環境，不少人在嘗試打包electron程序時都會碰到各類問題，下面以electron-vue模板爲例（打包使用electron-builder），windows環境下，一步步解決打包時所遇到的錯誤。

---

執行npm run build，下面每一步均可能因網絡緣由而報錯，請參照對應報錯按要求手動下載對應工具。

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

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

打開https://github.com/electron/e...，找到對應版本，下載以下兩個文件：

• 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

或者網上有人說能夠從淘寶鏡像站下載：https://npm.taobao.org/mirror...

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

下載地址如(請拷貝錯誤信息中的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

最終文件夾以下：

--electron
    --Cache
        electron-v1.8.2-win32-x64.zip
        SHASUMS256.txt-1.8.2
--electron-builder
    --cache
        --app-builder
            --app-builder-v0.6.1-x64
                解壓app-builder-v0.6.1-x64.7z所得文件
        --nsis
            --nsis-3.0.1.13
                解壓nsis-3.0.1.13.7z所得文件
        --nsis-resources
            --nsis-resources-3.3.0
                解壓nsis-resources-3.3.0.7z所得文件
        --winCodeSign
            --winCodeSign-1.9.0
                解壓winCodeSign-1.9.0.7z所得文件

通過以上艱難操做，至此全部可能下載失敗的包都有了，從新執行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。

再次打包，安裝APP後應該就正常了。