前段時(shí)間摸魚(yú)太多昭雌，閑的把正在做的vue+element的后臺(tái)項(xiàng)目轉(zhuǎn)成了桌面應(yīng)用惋鸥。
我用的是微軟的electron框架，就是vscode用的那個(gè)毕骡。
桌面開(kāi)發(fā)的框架很多驴娃，因?yàn)槲沂亲銮岸说淖嗪颍瑥倪@個(gè)入手還是比較簡(jiǎn)單的*只要會(huì)HTML與JS就可以上手了*
這個(gè)東西還是很好玩的循集，就是打包時(shí)間有點(diǎn)長(zhǎng)...
electron簡(jiǎn)介
官方網(wǎng)站
https://www.electronjs.org/electron是微軟在GitHub上開(kāi)源框架
https://github.com/electron（5w+ star）唇敞，electron是基于Chromium 和 Node.js 來(lái)構(gòu)建一個(gè)跨平臺(tái)應(yīng)用的（Mac，Windows咒彤，和Linux）疆柔。-
Chromium是一個(gè)開(kāi)源瀏覽器，與chrome區(qū)別是不會(huì)自動(dòng)更新镶柱，但是一些新特性貌似會(huì)在Chromium先上旷档。
我的理解就是他就是一個(gè)js控制的被打包了的精簡(jiǎn)版的谷歌瀏覽器
多進(jìn)程
Chromium是多進(jìn)程的，每一個(gè)頁(yè)面都是一個(gè)獨(dú)立的渲染進(jìn)程歇拆，每一個(gè)頁(yè)面就是一個(gè)窗口鞋屈，你可以理解成瀏覽器的tab
任何 Electron 應(yīng)用程序的入口都是 main 文件。 這個(gè)文件控制了主進(jìn)程故觅，它運(yùn)行在一個(gè)完整的Node.js環(huán)境中厂庇，負(fù)責(zé)控制您應(yīng)用的生命周期，顯示原生界面输吏，執(zhí)行特殊操作并管理渲染器進(jìn)程权旷。
主進(jìn)程
整體控制
全局快捷鍵
屏幕
窗口
菜單項(xiàng)
系統(tǒng)托盤
從主進(jìn)程到渲染進(jìn)程的異步通信
創(chuàng)建和控制視圖
等等
渲染進(jìn)程
頁(yè)面渲染
webview標(biāo)簽
渲染進(jìn)程與主進(jìn)程通信
從渲染進(jìn)程到主進(jìn)程的異步通信
子窗口
捕獲桌面資源
進(jìn)程間的關(guān)系
主進(jìn)程通過(guò)構(gòu)造BrowserWindow實(shí)例來(lái)創(chuàng)建頁(yè)面。每個(gè) BrowserWindow實(shí)例都在自己的渲染進(jìn)程里運(yùn)行頁(yè)面贯溅。當(dāng)一個(gè) BrowserWindow 實(shí)例被銷毀后拄氯，相應(yīng)的渲染進(jìn)程也會(huì)被終止。
Web頁(yè)面因?yàn)榘踩拗扑常荒苤苯釉L問(wèn)原生的GUI資源译柏，Electron也一樣，渲染進(jìn)程如果想要進(jìn)行原生的GUI操作姐霍，必須和主進(jìn)程通信鄙麦，請(qǐng)求相應(yīng)的GUI操作。
vue項(xiàng)目轉(zhuǎn)exe
開(kāi)始正題
步驟
git clone [https://github.com/electron/electron-quick-](https://github.com/electron/electron-quick-)**start**
cd electron-**quick**-**start**
cnpm **install**
-
打包要轉(zhuǎn)成桌面端的vue項(xiàng)目 本項(xiàng)目是基于vue-element-admin架構(gòu)的后臺(tái)管理系統(tǒng) 這個(gè)地方有個(gè)坑是要把a(bǔ)uth.js里面存儲(chǔ)token的方式換成localstorage方式 否則cnpm start之后登錄頁(yè)是不會(huì)跳轉(zhuǎn)的，因?yàn)閑lectron應(yīng)用會(huì)有兩個(gè)進(jìn)程黔衡，一個(gè)瀏覽器一個(gè)node蚓聘，在node里自然獲取不到瀏覽器的cookie 需要靠electron提供的api來(lái)進(jìn)行通信 所以這塊直接用localStorage方式了****打包的地方還一個(gè)坑就是 靜態(tài)資源文件路徑要變成./ 否則會(huì)出現(xiàn)白屏問(wèn)題
image.png
-
刪除掉原index.html 把打包好的dist放在main.js同級(jí)目錄然后引入
image.png cnpm start 運(yùn)行
打包
打包有很多種方法 插件很多
我用的是electron-packager
cnpm install electron-packager --save-dev
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"http://此處為添加命令
}
命令說(shuō)明：
* location of project：項(xiàng)目所在路徑
* name of project：打包的項(xiàng)目名字
* platform：確定了你要構(gòu)建哪個(gè)平臺(tái)的應(yīng)用（Windows、Mac 還是 Linux）
* architecture：決定了使用 x86 還是 x64 還是兩個(gè)架構(gòu)都用
* electron version：electron 的版本
* optional options：可選選項(xiàng)```
```npm run packager```
打包時(shí)間挺長(zhǎng)的 要耐心等待一下
在App-win32-x64文件夾下可以找到App.exe
