起因:由於公司產品是一個工具類的 可能為了體現一種穩定 安全性,前端技術棧決定使用elelctron來開發一個桌面端應用 用到的前端框架是react UI框架是antd-design-pro
正常來說 可以使用electron-quick-start來搭建框架 這樣會輕松許多 但是因為一些原因 接手的項目沒有用 所以只能靠自己去寫了。
本人 對electron也沒有很深入的了解 在這里 只是就對一些開發過程中遇到的問題做些記錄 但是由於 是項目差不多結束才做的 所以很多問題代碼無法回退 只能大概描述了
1 elelctron內運行antd 請求接口找不到問題(很早之前的問題了 就沒有圖片了)
因為使用antd-design-pro調接口是用的代理, 類似 /api 這樣的, 是相對路徑 而electron 是打包所有在本地資源的 所以會導致這個問題
解決方案:請求接口用全路徑代替 同時禁用electron內部的安全策略。
2 electron 打包問題 (在electron-builder 和 electron-package 中 我選擇了前者(原因是網上都說前者打包出來的會小很多))
一、 signature 問題 window 相對來說 沒有證書也行 並不影響應用后續的打包 和 熱更新 但是 mac還是需要的 沒有證書(開發者賬號) 打包出來的應用都無法使用
注意 開發者賬號 這樣格式 是交了錢的。
二、 熱更新 是一個桌面端的靈魂 (網上有很多文章 是關於熱更新的 就不細些代碼了 先后順序按照我記起的來 )
Q1、因為熱更新主要代碼是在主進程里面的 main.js 如果在里面的出錯 在打包出來的應用你很難看到問題 所以開始之前 可以使用electron-log 在一些關鍵點打印出日志
查看日志 在mac上 你可以進 查看日志
Q2、我只是一個小前端 在一開始開發的時候 需要一服務器地址存放最新yml文件和打出來的包 為了簡單 我本地啟了nginx服務 將資源放入本地 這樣 就可以自己測試熱更了
部分 nginx配置 如果 還沒安裝nginx 可以去看我之前寫的nginx 部署vue 里面有一些簡單的部署。
桌面文件 里面就可以放入那些打包出來的yml dmg exe 之類的文件
代碼寫入熱更新地址
Q3、假設你已經跑起來熱更新了 你或許會遇到 總是秒下 完全看不到過程
原因是可能再你多次的測試中 其實資源早就已經下下來了 所以這個時候你需要去對應緩沖清除對應的資源 然后再繼續測試
資源地址 里面有一個pending 刪除就可以了
Q4、好不容易跑起來了 發現在日志里面 明明已經下完了 很正常 但是在前端顯示 卻會發現下載進度 一直開着
原因: 我也不太懂 我猜是和node有關里面的通信有關 表面上 你看到日志里面可能只是打印了10多次下載就到100% 但是實際上 主進程和渲染程會有上萬次的通信
所以在前端 可能得執行完才能結束
解決方案:
這樣我是解決 那個問題了。如果哪位哥哥知道具體原因 可以留言告訴我 讓我學習學習。。。QAQ
Q5、終於在mac上 熱更新成功了 結果在window上測試時報錯了 打開日志 發現 報錯信息:無法建立到信任根辦法機構的證書鏈
腦子里有大大的問號 嚇的我以為熱更新一定要證書 但是其實並不是這樣
原因:這個也怪自己 因為是mac上開發的 導入了p12證書 再打包window的時候 也簽名用了p12 如果不熱更新的話 正常 一點問題沒有 但是熱更新的話 就會去檢測簽名 這個時候會發現證書簽名不對 所以就報錯了
解決方法:打包window的時候可以將CSC_LINK環境變量注釋了
Q5、 網上打包出來都是很小 我打包出來 好家伙 180多M
mac下進入app顯示包內容查看具體哪些大 我這的原因是我打包的時候 把所有的node_modules都打包進去了 (當時項目 我是整個只有一個package.json文件)
官方文檔 https://www.electron.build/configuration/contents.html
1、這些可以在builder里面的files自己寫需要忽略的文件 !**/node_modules/**/* 可以忽略所有的的node_modules 但是 這樣你就無法去載入你需要的一些dependencies依賴了
2、再建一個文件夾 里面專門放electron相關的代碼 和配置 這樣就可以自定義 需要的依賴了
package.json 里面就可以寫一些builder 配置 以及一些electron-updater electron-log 之類和electron相關的東西
暫時遇到的問題就是這些 后續有的話 會繼續補充...........