一、背景
簡介
Electron的優勢很多，它可以讓你使用純 JavaScript 調用豐富的原生(操作系統) APIs 來創造桌面應用。 你也可以把它看作一個 Node. js 的變體，它的目標是專注于桌面應用而不是 Web 服務器端。當然這不意味著 Electron 是某個圖形用戶界面（GUI）庫的 JavaScript 版本。 相反，Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器
初衷
目前市面上的資料大都是electron+vue以強關聯形式的組合編譯，其優點是可以共用一套package.json，但缺點也是特別的突出，坑真的特別特別多，讓你始終不知道下個bug會在何時何地出，但又因為強關聯，electron和vue相互滲透嚴重，所以bug調試也是特別的費時費力還未必有好的成效，本人也是因為填坑無力，所以才寫的這篇文章。
本文是以Electron+vue形式寫的demo，所以將會以Electron+vue形式進行講解，但諸如其他web框架類似Angular等原理思路也是一樣，可以共用
demo鏈接
二、思路
整體思路非常簡單，也非常容易被接受，通俗思路就是：將Electron和Vue相互獨立，然后通過Vue生成build包dist，再將編譯后的dist文件夾交給Electron，最后通過Electron去加載dist至最終應用程序。具體步驟如下（【】內命名皆隨意）：
- 創建空vue項目【項目1】
- 配置【項目1】的package.json文件
- 創建空electron項目【項目2】（與【項目1】的關系可以是完全獨立兩個項目，也可以嵌套在【項目1】根路徑下以獨立文件夾形式存在，本文以第二種方式呈現）
- 配置【項目2】的package.json文件
- 編譯【項目1】，生成dist文件夾
- 將dist文件夾移動到【項目2】根路徑下
- 進入【項目2】根目錄，編譯【項目2】
- electron-builder打包
三、項目結構
上文說了，該文章是以Electron+vue形式講解，所以此處給出的項目結構也是Electron+Vue形式，具體如下：
- 整體是vue項目中嵌套electron項目，圖中【2】release文件夾包含的就是electron項目相關
- 標記【1】和【3】兩個
dist文件夾完全相同，【1】由vue項目打包生成，生成之后copy到【release】根路徑下得到【3】*（此處也可以直接將Vue編譯后的dist文件夾路徑設置到release路徑下，這樣可以省去dist遷移操作，后面有相關配置介紹）* - 標記【4】是屬于electron項目的package文件，作用域也僅限于【release】路徑下
- 標記【5】是屬于vue項目的package文件，作用域也僅限于vue相關
四、具體流程
到這一步就開始咱們從0到1的框架搭建了，因為只是演示demo，所以最后的作品也只是將Vue官網打包成一個dmg、exe桌面應用程序，但注意事項、思路流程及文件配置下文都會涉及。
4.1、創建vue項目
具體過程就不多贅述了，官網很詳細
vue create [projectName]
4.2、創建Electron項目
在【4.1】所建項目的根目錄下創建【release】文件夾
在【release】文件夾下執行electron創建命令，詳情可以參照electron開發文檔。
一個最基本的electron應用應該會有如下結構：
your-app/
├── package.json
├── main.js
└── index.html
具體的創建細節及描述請參考Electron文檔-打造你的第一個Electron應用，文檔講的很詳細，而且也是中文文檔，我這就不復制粘貼了
4.3、配置vue項目config文件
配置該文件的目的是為了順利打包vue項目，此處我是新建了vue.config.js文件用來處理此類配置，
針對本文的配置也挺簡單，只是列出了幾項，想看更多配置的可參照配置參考，同樣的也是中文文檔。
module.exports = {
// 部署生產環境和開發環境下的URL
publicPath: './',
// 生成的文件的總文件夾的名稱
outputDir:'./release/dist',
// 指定生成的html文件的輸出路徑 (配置之后，改變系統默認的index.html的文件名)
indexPath:'./index.html',
// 針對map文件,map文件的作用:打包之后的項目,代碼都經過了壓縮加密
// 這時如果報錯,無法準確得知錯誤在哪里產生,有了map文件,就可以精準定位到是哪里出錯
// 如果打包后發現map文件體積過大,導致整個項目文件體積過大,就可以設置不輸出map文件
productionSourceMap:false,
devServer: {
// can be overwritten by process.env.HOST
host: '0.0.0.0',
port: 8080
},
pluginOptions: {
electronBuilder: {
builderOptions: {
win: { icon: './public/app.ico' },
mac: { icon: './public/app.png' }
}
}
}
};
4.4、編譯vue項目
此步驟的目的在于生成dist文件夾，默認情況下會生成在vue項目根路徑下，但通過對【4.3】的配置，此處將dist文件夾生成在./release/dist，以便Electron最終調用。（對應【4.3】的outputDir標簽）
通過前文vue項目創建之后，會在package.json的scripts下生成build指令，大家到時可自行查看，該篇以本文為例如下：
// 本文中的package.json
"scripts": {
"serve": "vue-cli-service serve", // 此命令用于web調試
"build": "vue-cli-service build"
}
// 在命令行執行如下命令可以讓vue打包生成dist文件夾
npm run build
好了，這一步過后就沒有Vue什么事了，剩下的就都是Electron項目要做的事了，大致這么兩件事：1、如何加載dist文件夾；2、打包桌面應用
4.5、配置Electron的main.js文件
main.js是Electron項目的啟動文件，作為門戶文件，它在Electron中的作用也是非常巨大的，監管著所有的聲明周期函數，非常重要，不可替代；但文件本身卻并不復雜，在創建Electron項目時提供的官網鏈接中已對main.js的內容做了詳細說明，直接copy就好，此處講的也只是對與官網配置不一樣的地方，具體如下：
紅框標注的地方非常重要，就是因為這段代碼，才實現的Electron訪問dist的可能，也才有下文種種。
OK，到這一步后其實就可以通過 electron . 命令在開發模式下運行應用程序了，完成到這一步相信大家跟我一樣都是信心滿滿，ok，到這一步后咱們離著最終打包成可執行文件就只差package.json這一關了。
4.6、配置Electron項目下package文件
package.json是一個項目的靈魂文件，也是咱們此次打包所經歷的最后一道門坎，所以此處專門拿一小章節描述，當然描述的內容有限，也只是對自己走坑埋坑的一些教訓總結，讓大家引以為戒，廢話不多說了，以下是本demo所涉及的配置信息：
對于一些配置參數的含義我認為在圖片中標注的還算詳細，大部分就不再贅述了，此處我著重想說的就一下幾個：
- main：這個參數指定的是Electron程序的啟動入口，對應的也是Electron跟路徑下的main.js文件，這個一定不能有錯。
- output：這個參數指定的是最終應用程序安裝包的輸出路徑，默認與package.json同路徑，此處是給它新設定了一個outdir文件夾專門存儲，
程序打包成功后該文件夾會自動生成，無需刻意創建 -
files：這個參數被高亮了，因為我覺著有必要重點說明，因為后續會有很多bug都是出自這個參數，它的作用是告訴Electron，哪些文件需要被打包進最終程序（dmg、exe）之中，但很多人可能會因為少打包了這個那個的文件而導致最終的程序報這樣那樣的錯誤無法正常運行，所以這個參數特別重要，此處咱們被打包了四個文件：dist是Vue生成的編譯文件，也是Electron最終要呈現的部分，所以必須要有；main.js作為程序的啟動函數，必須要有；node_module是Nodejs的庫文件，其中有很多方法都被程序所調用，所以必須要有；package.json作為配置文件，我認為也必須要有（當然沒測試過沒有的情況，有興趣的自己測試），所以此處我是給files指定了四個被打包項，具體哪些需要被設定需要結合實際項目而定，但思路要求如上
執行完這一步，終于可以進行最終的打包操作了，興奮吧～～。
4.7、打包
資源文件準備
因為Electron打包時必需要icon等基本資源文件，否則打包不通過，鑒于此，本文也是直接在【release】文件夾下創建了一個【build】文件夾，專門用于存儲icon等資源文件，之所以在【release】文件夾下創建，也是因為這些icon信息只屬于Electron項目范疇。
打包方式選擇
Electron目前有兩種打包方式：electron-packager和electron-builder，本文采用electron-builder方式進行打包，也是因為它比起electron-packager有更多的優勢：
electron-builder優勢總結：
有更豐富的功能，支持更多的平臺，支持自動更新，打出的包更輕量，打出的包不會暴露源碼信息，具體表現為：
- 可以打包成msi、exe、dmg文件（前兩種window系統下才可以，后一種MacOS系統）
- 幾乎支持所以平臺的所有格式
- 支持Auto Update
- 支持CLI和JS API兩種使用方式
鑒于以上優勢，最終選擇electron-builder方式打包
開始打包
對于electron-builder形式的打包，我認為這篇文章寫的不錯，包含了打包指令，各指令意思，也包含了打包環境配置，可以直接參考：electron-builder打包見解，本文在這里就不多贅述了
打包結果
到了出成績的時候了，下面是此次demo的最終結果輸出，因為本人是mac電腦，所以最終只運行了dmg文件并截圖，在此強烈建議在window環境下打包exe格式，因為打包的過程中會用到系統本身的東西，尤其項目存在與串口交互邏輯的時候（serialport等）
執行打包操作后最終項目結構：
到此Electron+vue從0-1的打包過程就結束了，最終在平臺上的運行效果：
demo倉庫：傳送門
