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