一购啄、背景

簡(jiǎn)介

Electron的優(yōu)勢(shì)很多，它可以讓你使用純 JavaScript 調(diào)用豐富的原生(操作系統(tǒng)) APIs 來(lái)創(chuàng)造桌面應(yīng)用嘱么。 你也可以把它看作一個(gè) Node. js 的變體狮含，它的目標(biāo)是專(zhuān)注于桌面應(yīng)用而不是 Web 服務(wù)器端。當(dāng)然這不意味著 Electron 是某個(gè)圖形用戶(hù)界面（GUI）庫(kù)的 JavaScript 版本曼振。 相反几迄，Electron 使用 web 頁(yè)面作為它的 GUI，所以你能把它看作成一個(gè)被 JavaScript 控制的冰评，精簡(jiǎn)版的 Chromium 瀏覽器

初衷

目前市面上的資料大都是electron+vue以強(qiáng)關(guān)聯(lián)形式的組合編譯映胁，其優(yōu)點(diǎn)是可以共用一套package.json，但缺點(diǎn)也是特別的突出集索，坑真的特別特別多屿愚，讓你始終不知道下個(gè)bug會(huì)在何時(shí)何地出，但又因?yàn)閺?qiáng)關(guān)聯(lián)务荆，electron和vue相互滲透嚴(yán)重，所以bug調(diào)試也是特別的費(fèi)時(shí)費(fèi)力還未必有好的成效穷遂，本人也是因?yàn)樘羁訜o(wú)力函匕，所以才寫(xiě)的這篇文章。

本文是以Electron+vue形式寫(xiě)的demo蚪黑，所以將會(huì)以Electron+vue形式進(jìn)行講解盅惜，但諸如其他web框架類(lèi)似Angular等原理思路也是一樣，可以共用
demo鏈接

二忌穿、思路

整體思路非常簡(jiǎn)單抒寂，也非常容易被接受，通俗思路就是：將Electron和Vue相互獨(dú)立掠剑，然后通過(guò)Vue生成build包dist屈芜，再將編譯后的dist文件夾交給Electron，最后通過(guò)Electron去加載dist至最終應(yīng)用程序朴译。具體步驟如下（【】?jī)?nèi)命名皆隨意）：

1. 創(chuàng)建空vue項(xiàng)目【項(xiàng)目1】
2. 配置【項(xiàng)目1】的package.json文件
3. 創(chuàng)建空electron項(xiàng)目【項(xiàng)目2】（與【項(xiàng)目1】的關(guān)系可以是完全獨(dú)立兩個(gè)項(xiàng)目井佑，也可以嵌套在【項(xiàng)目1】根路徑下以獨(dú)立文件夾形式存在，本文以第二種方式呈現(xiàn)）
4. 配置【項(xiàng)目2】的package.json文件
5. 編譯【項(xiàng)目1】眠寿，生成dist文件夾
6. 將dist文件夾移動(dòng)到【項(xiàng)目2】根路徑下
7. 進(jìn)入【項(xiàng)目2】根目錄躬翁，編譯【項(xiàng)目2】
8. electron-builder打包

三、項(xiàng)目結(jié)構(gòu)

上文說(shuō)了盯拱，該文章是以Electron+vue形式講解盒发，所以此處給出的項(xiàng)目結(jié)構(gòu)也是Electron+Vue形式例嘱，具體如下：

• 整體是vue項(xiàng)目中嵌套electron項(xiàng)目，圖中【2】release文件夾包含的就是electron項(xiàng)目相關(guān)
• 標(biāo)記【1】和【3】?jī)蓚€(gè)dist文件夾完全相同宁舰，【1】由vue項(xiàng)目打包生成拼卵，生成之后copy到【release】根路徑下得到【3】*（此處也可以直接將Vue編譯后的dist文件夾路徑設(shè)置到release路徑下，這樣可以省去dist遷移操作明吩，后面有相關(guān)配置介紹）*
• 標(biāo)記【4】是屬于electron項(xiàng)目的package文件间学，作用域也僅限于【release】路徑下
• 標(biāo)記【5】是屬于vue項(xiàng)目的package文件，作用域也僅限于vue相關(guān)

截屏2020-03-25下午6.34.53.png

四印荔、具體流程

到這一步就開(kāi)始咱們從0到1的框架搭建了低葫，因?yàn)橹皇茄菔綿emo，所以最后的作品也只是將Vue官網(wǎng)打包成一個(gè)dmg仍律、exe桌面應(yīng)用程序嘿悬，但注意事項(xiàng)、思路流程及文件配置下文都會(huì)涉及水泉。

4.1善涨、創(chuàng)建vue項(xiàng)目

具體過(guò)程就不多贅述了，官網(wǎng)很詳細(xì)

vue create [projectName]

4.2草则、創(chuàng)建Electron項(xiàng)目

在【4.1】所建項(xiàng)目的根目錄下創(chuàng)建【release】文件夾

在【release】文件夾下執(zhí)行electron創(chuàng)建命令钢拧，詳情可以參照electron開(kāi)發(fā)文檔。

一個(gè)最基本的electron應(yīng)用應(yīng)該會(huì)有如下結(jié)構(gòu)：

your-app/ 
├── package.json 
├── main.js 
└── index.html 

具體的創(chuàng)建細(xì)節(jié)及描述請(qǐng)參考Electron文檔-打造你的第一個(gè)Electron應(yīng)用炕横，文檔講的很詳細(xì)源内，而且也是中文文檔，我這就不復(fù)制粘貼了

4.3份殿、配置vue項(xiàng)目config文件

配置該文件的目的是為了順利打包vue項(xiàng)目膜钓，此處我是新建了vue.config.js文件用來(lái)處理此類(lèi)配置，

針對(duì)本文的配置也挺簡(jiǎn)單卿嘲，只是列出了幾項(xiàng)颂斜，想看更多配置的可參照配置參考，同樣的也是中文文檔拾枣。

module.exports = {  
// 部署生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境下的URL 
publicPath: './', 
// 生成的文件的總文件夾的名稱(chēng) 
outputDir:'./release/dist', 
// 指定生成的html文件的輸出路徑 (配置之后沃疮，改變系統(tǒng)默認(rèn)的index.html的文件名) 
indexPath:'./index.html', 
// 針對(duì)map文件,map文件的作用:打包之后的項(xiàng)目,代碼都經(jīng)過(guò)了壓縮加密 
// 這時(shí)如果報(bào)錯(cuò),無(wú)法準(zhǔn)確得知錯(cuò)誤在哪里產(chǎn)生,有了map文件,就可以精準(zhǔn)定位到是哪里出錯(cuò) 
// 如果打包后發(fā)現(xiàn)map文件體積過(guò)大,導(dǎo)致整個(gè)項(xiàng)目文件體積過(guò)大,就可以設(shè)置不輸出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項(xiàng)目

此步驟的目的在于生成dist文件夾放前，默認(rèn)情況下會(huì)生成在vue項(xiàng)目根路徑下忿磅，但通過(guò)對(duì)【4.3】的配置，此處將dist文件夾生成在./release/dist凭语，以便Electron最終調(diào)用葱她。（對(duì)應(yīng)【4.3】的outputDir標(biāo)簽）

通過(guò)前文vue項(xiàng)目創(chuàng)建之后，會(huì)在package.json的scripts下生成build指令似扔，大家到時(shí)可自行查看吨些，該篇以本文為例如下：

// 本文中的package.json 
"scripts": {  
"serve": "vue-cli-service serve", // 此命令用于web調(diào)試 
"build": "vue-cli-service build" 
}  

// 在命令行執(zhí)行如下命令可以讓vue打包生成dist文件夾 
npm run build

好了搓谆，這一步過(guò)后就沒(méi)有Vue什么事了，剩下的就都是Electron項(xiàng)目要做的事了豪墅，大致這么兩件事：1泉手、如何加載dist文件夾；2偶器、打包桌面應(yīng)用

4.5斩萌、配置Electron的main.js文件

main.js是Electron項(xiàng)目的啟動(dòng)文件，作為門(mén)戶(hù)文件屏轰，它在Electron中的作用也是非常巨大的颊郎，監(jiān)管著所有的聲明周期函數(shù)，非常重要霎苗，不可替代姆吭；但文件本身卻并不復(fù)雜，在創(chuàng)建Electron項(xiàng)目時(shí)提供的官網(wǎng)鏈接中已對(duì)main.js的內(nèi)容做了詳細(xì)說(shuō)明唁盏，直接copy就好内狸，此處講的也只是對(duì)與官網(wǎng)配置不一樣的地方，具體如下：

截屏2020-03-25下午8.07.50.png

紅框標(biāo)注的地方非常重要厘擂，就是因?yàn)檫@段代碼昆淡，才實(shí)現(xiàn)的Electron訪問(wèn)dist的可能，也才有下文種種刽严。

OK瘪撇，到這一步后其實(shí)就可以通過(guò) electron . 命令在開(kāi)發(fā)模式下運(yùn)行應(yīng)用程序了，完成到這一步相信大家跟我一樣都是信心滿(mǎn)滿(mǎn)港庄，ok，到這一步后咱們離著最終打包成可執(zhí)行文件就只差package.json這一關(guān)了恕曲。

4.6鹏氧、配置Electron項(xiàng)目下package文件

package.json是一個(gè)項(xiàng)目的靈魂文件，也是咱們此次打包所經(jīng)歷的最后一道門(mén)坎佩谣，所以此處專(zhuān)門(mén)拿一小章節(jié)描述把还，當(dāng)然描述的內(nèi)容有限，也只是對(duì)自己走坑埋坑的一些教訓(xùn)總結(jié)茸俭，讓大家引以為戒吊履，廢話不多說(shuō)了，以下是本demo所涉及的配置信息：

截屏2020-03-25下午7.50.14.png

對(duì)于一些配置參數(shù)的含義我認(rèn)為在圖片中標(biāo)注的還算詳細(xì)调鬓，大部分就不再贅述了艇炎，此處我著重想說(shuō)的就一下幾個(gè)：

• main：這個(gè)參數(shù)指定的是Electron程序的啟動(dòng)入口，對(duì)應(yīng)的也是Electron跟路徑下的main.js文件腾窝，這個(gè)一定不能有錯(cuò)缀踪。
• output：這個(gè)參數(shù)指定的是最終應(yīng)用程序安裝包的輸出路徑居砖，默認(rèn)與package.json同路徑，此處是給它新設(shè)定了一個(gè)outdir文件夾專(zhuān)門(mén)存儲(chǔ)驴娃，程序打包成功后該文件夾會(huì)自動(dòng)生成奏候，無(wú)需刻意創(chuàng)建
• files：這個(gè)參數(shù)被高亮了，因?yàn)槲矣X(jué)著有必要重點(diǎn)說(shuō)明唇敞，因?yàn)楹罄m(xù)會(huì)有很多bug都是出自這個(gè)參數(shù)蔗草，它的作用是告訴Electron，哪些文件需要被打包進(jìn)最終程序（dmg疆柔、exe）之中咒精，但很多人可能會(huì)因?yàn)樯俅虬诉@個(gè)那個(gè)的文件而導(dǎo)致最終的程序報(bào)這樣那樣的錯(cuò)誤無(wú)法正常運(yùn)行，所以這個(gè)參數(shù)特別重要婆硬，此處咱們被打包了四個(gè)文件：dist是Vue生成的編譯文件狠轻，也是Electron最終要呈現(xiàn)的部分，所以必須要有彬犯；main.js作為程序的啟動(dòng)函數(shù)向楼，必須要有；node_module是Nodejs的庫(kù)文件谐区，其中有很多方法都被程序所調(diào)用湖蜕，所以必須要有；package.json作為配置文件宋列，我認(rèn)為也必須要有（當(dāng)然沒(méi)測(cè)試過(guò)沒(méi)有的情況昭抒，有興趣的自己測(cè)試），所以此處我是給files指定了四個(gè)被打包項(xiàng)炼杖，具體哪些需要被設(shè)定需要結(jié)合實(shí)際項(xiàng)目而定灭返，但思路要求如上

執(zhí)行完這一步，終于可以進(jìn)行最終的打包操作了坤邪，興奮吧～～熙含。

4.7、打包

資源文件準(zhǔn)備

因?yàn)?code>Electron打包時(shí)必需要icon等基本資源文件艇纺，否則打包不通過(guò)怎静，鑒于此，本文也是直接在【release】文件夾下創(chuàng)建了一個(gè)【build】文件夾黔衡，專(zhuān)門(mén)用于存儲(chǔ)icon等資源文件蚓聘，之所以在【release】文件夾下創(chuàng)建，也是因?yàn)檫@些icon信息只屬于Electron項(xiàng)目范疇盟劫。

打包方式選擇

Electron目前有兩種打包方式：electron-packager和electron-builder夜牡，本文采用electron-builder方式進(jìn)行打包，也是因?yàn)樗绕餰lectron-packager有更多的優(yōu)勢(shì)：
electron-builder優(yōu)勢(shì)總結(jié)：
有更豐富的功能捞高，支持更多的平臺(tái)氯材，支持自動(dòng)更新渣锦，打出的包更輕量，打出的包不會(huì)暴露源碼信息氢哮，具體表現(xiàn)為：

• 可以打包成msi袋毙、exe、dmg文件（前兩種window系統(tǒng)下才可以冗尤，后一種MacOS系統(tǒng)）
• 幾乎支持所以平臺(tái)的所有格式
• 支持Auto Update
• 支持CLI和JS API兩種使用方式

鑒于以上優(yōu)勢(shì)听盖，最終選擇electron-builder方式打包

開(kāi)始打包

對(duì)于electron-builder形式的打包，我認(rèn)為這篇文章寫(xiě)的不錯(cuò)裂七，包含了打包指令皆看，各指令意思，也包含了打包環(huán)境配置背零，可以直接參考：electron-builder打包見(jiàn)解腰吟，本文在這里就不多贅述了

打包結(jié)果

到了出成績(jī)的時(shí)候了，下面是此次demo的最終結(jié)果輸出徙瓶，因?yàn)楸救耸莔ac電腦毛雇，所以最終只運(yùn)行了dmg文件并截圖，在此強(qiáng)烈建議在window環(huán)境下打包exe格式侦镇，因?yàn)榇虬倪^(guò)程中會(huì)用到系統(tǒng)本身的東西灵疮，尤其項(xiàng)目存在與串口交互邏輯的時(shí)候（serialport等）

執(zhí)行打包操作后最終項(xiàng)目結(jié)構(gòu)：

截屏2020-03-25下午7.57.03.png

到此Electron+vue從0-1的打包過(guò)程就結(jié)束了，最終在平臺(tái)上的運(yùn)行效果：

截屏2020-03-25下午8.03.20.png

demo倉(cāng)庫(kù)：傳送門(mén)