在這里使用electron的官方例子做打包示例

electron中文網(wǎng)，electron官網(wǎng)

首先，使用git下載官方的quick-start示例，然后進(jìn)入electron-quick-start目錄下npm install，安裝依賴，這里下的包比較大，根據(jù)個(gè)人網(wǎng)絡(luò)情況，建議使用cnpm淘寶源來下。

關(guān)于示例中的文件：

? ? 1. index.html這個(gè)就不用多說了，就是html頁面；

? ? 2. main.js就是electron的應(yīng)用入口；

? ? 3. package.json就是安裝依賴及配置信息

? ? 4. 啟動(dòng)示例直接進(jìn)到目錄下執(zhí)行electron main就可以打開了，也可以使用gulp來做啟動(dòng)，具體網(wǎng)上有使用VScode+gulp的例子

這里詳細(xì)說下使用electron-packager打包：? ??

? ? 1. 項(xiàng)目根目錄下建議建兩個(gè)文件夾，一個(gè)app用來放項(xiàng)目所有的代碼以及靜態(tài)文件等，另外一個(gè)dist用來放打包后的包，我這里是這樣去做的；

? ? 2. 將之前的main.js和index.html放到app文件夾下，然后在app下新建一個(gè)package.json，使用這個(gè)來做項(xiàng)目依賴管理，外面那個(gè)package.json只用來做打包應(yīng)用；

目錄結(jié)構(gòu)

3. 修改app下的package.json ，將main屬性改為main.js,在這里注意你自己的文件路徑

app/package.json

? ? 4. 修改根目錄下的package.json文件，在此之前先將electron-packager安裝到你的根目錄下的electron-quick-start/node_modules中

打包配置

? ? 5. 打包不同平臺(tái)下的配置不完全相同，可以在網(wǎng)上搜搜有很多講解這些信息是干嘛的，注意在打包時(shí)icon圖標(biāo)信息最好有，否則有可能會(huì)打包失敗，我剛開始好幾次打包失敗，error信息就報(bào)的這塊，在打包各個(gè)平臺(tái)時(shí)還會(huì)下載一些針對(duì)各個(gè)平臺(tái)的依賴，所以在第一次打包時(shí)保持網(wǎng)絡(luò)OK

? ? 6. package.json配置完成后就可以在命令行里面輸入相對(duì)應(yīng)的命令進(jìn)行打包了

打包完成

windows下打包后運(yùn)行

這里總結(jié)一下之前使用electron的一些問題：

? ? 1. 寫代碼的時(shí)候如果考慮到全平臺(tái)的使用，雖然electron可以打造跨平臺(tái)的應(yīng)用，但是前提是你你在代碼中做了相對(duì)應(yīng)的處理，比如使用node在操作linux下面命令以及文件讀取和windows下有所不同，linux下文件有l(wèi)ink格式，我當(dāng)時(shí)寫讀取目錄樹的時(shí)候就用錯(cuò)方法導(dǎo)致將所有l(wèi)ink當(dāng)成文件夾，進(jìn)入死循環(huán)，這只是一個(gè)例子，還要好多坑

? ? 2. elelctron-packager打包只是打包成各個(gè)平臺(tái)下可執(zhí)行文件，并不是安裝包，如果需要打包成安裝包之類的可以參考electron-builder

? ? 3. 打包成功后執(zhí)行如果直接報(bào)錯(cuò)，這里如果你的代碼沒有問題的話，有很大的原因是你的啟動(dòng)文件main.js或者其他文件的路徑出錯(cuò)，仔細(xì)檢查路徑，修改后重新打包即可

? ? 4. 大家可以在electron的中文網(wǎng)上面加electron的交流群來交流學(xué)習(xí)關(guān)于electron的問題

文中只是本人使用過程中總結(jié)出來的問題，如有錯(cuò)誤歡迎指正。