1. 為什么要把好好的Web管理系統(tǒng)做成Windows安裝包先說結(jié)論這個需求并不是拍腦袋想出來的而是管理類軟件在真實業(yè)務(wù)場景里被逼出來的。我接過好幾個類似的單子甲方無一例外都說了差不多的話瀏覽器里用著別扭IT部門不好管理業(yè)務(wù)員老是把網(wǎng)址搞丟或者是壓根不允許員工隨便打開瀏覽器亂逛。拿一個典型的案例來說。某公司內(nèi)部有一個基于Vue2搭建的后臺管理系統(tǒng)功能包括訂單錄入、客戶管理、報表查看、審批流。系統(tǒng)上線大半年功能層面早就穩(wěn)定了但運營那邊三天兩頭吐槽收藏夾被清理了找不到網(wǎng)址、Chrome自動升級之后頁面字體變樣了、業(yè)務(wù)員同時開好幾個標(biāo)簽頁經(jīng)常把系統(tǒng)頁面關(guān)掉、每次登錄都要敲一遍地址和賬號密碼。這些其實都不是技術(shù)問題而是Web形態(tài)在專用工具場景下的天然短板。把Vue2的Web管理系統(tǒng)升級成Windows應(yīng)用程序安裝包本質(zhì)上就是給現(xiàn)成的網(wǎng)頁套上一層桌面殼并且利用桌面殼的能力把一些Web端做不好或者不能做的事情補上。對用戶來說桌面桌面直接雙擊圖標(biāo)就能打開不依賴瀏覽器不依賴網(wǎng)址記憶還能自動登錄、記住窗口位置、托盤常駐。對IT運維來說裝機、更新、權(quán)限管控都可以通過安裝包來統(tǒng)一分發(fā)比挨個瀏覽器加書簽靠譜得多。但這篇文章并不是讓你把項目推倒重來。Vue2的代碼基座完全不用動我接下來講的所有內(nèi)容都是圍繞如何用最小的成本把已有的Vue2管理系統(tǒng)跑進一個Windows桌面應(yīng)用殼里再打包成安裝包展開。你不需要會C不需要懂Windows底層API只需要熟悉JavaScript和Node.js環(huán)境就夠了。我盡量把選型、改造、打包、上線后維護的整套思路講透附帶上可以直接參考的配置和代碼讓你在自己的項目里能少走彎路。2. 選型Electron、Tauri還是輕量級瀏覽器套殼2.1 三套主流桌面化方案的橫向?qū)Ρ任乙娺^不少人在第一步就卡住糾結(jié)用什么框架來封裝。實際上最適合Vue2老項目改造的路線翻來覆去也就那么幾條方案核心原理前端改動量安裝包體積內(nèi)存占用Win7及老系統(tǒng)兼容性Electron內(nèi)置Chromium內(nèi)核 Node.js運行時極小幾乎不用改60MB起步常見100MB偏高約300MB取決于Electron版本老版本可兼容Win7Tauri調(diào)用操作系統(tǒng)原生WebView后端用Rust較小但要適配前端資源加載方式很小幾MB到十幾MB低Win7需要額外配置WebView2麻煩CefBrowser套殼CEF/WebView2封裝自己嵌瀏覽器內(nèi)核寫C宿主程序中等視內(nèi)核而定中等需要開發(fā)能力不適合前端團隊對于Vue2這種以JavaScript生態(tài)為主的團隊Electron是綜合阻力最小的選擇。雖然有體積大、內(nèi)存高的毛病但它的開發(fā)模型跟前端工程完全一致主進程用Node.js寫界面直接用現(xiàn)有Web頁面通信走IPC資料多得能堆成山。最重要的是Vue2項目里用的各種依賴、插件、構(gòu)建配置全部可以保留不動這是Tauri方案做不到的——Tauri要求前端資源以靜態(tài)文件方式加載而且對老版本W(wǎng)indows的支持依賴WebView2運行時在內(nèi)網(wǎng)離線環(huán)境里光裝這個運行時就能折騰死人。2.2 為什么兼容老舊Vue2項目時Electron最省心Tauri聽起來很香體積小、內(nèi)存占用低但它在跟Vue2老項目配合時有兩個繞不開的坑。第一個是WebView內(nèi)核版本不一致用戶的Windows 10或Windows 11系統(tǒng)上可能裝了不同版本的WebView2代碼里用到的某些ES2020以上語法、某些CSS特性在不同內(nèi)核上表現(xiàn)不一致你很難在研發(fā)環(huán)境完全模擬用戶的運行環(huán)境。第二個是Vue2本身已經(jīng)進入維護期對新的桌面封裝生態(tài)適配不足強行用Tauri的通信模式改造現(xiàn)有代碼改動量會超過預(yù)期。Electron則相反它直接把Chromium內(nèi)核打進了安裝包里意味著所有用戶看到的瀏覽器行為和你在開發(fā)環(huán)境里Chrome的表現(xiàn)完全一致。對于管理系統(tǒng)這種重交互、重表格、重表單校驗的業(yè)務(wù)場景內(nèi)核一致性帶來的好處非常明顯不會再出現(xiàn)我這好好的客戶機器上日期組件變成英文這種Web開發(fā)的經(jīng)典噩夢。而且Electron的Node.js集成可以直接操作文件系統(tǒng)后面做自動更新、本地日志、數(shù)據(jù)庫導(dǎo)出這些功能都順理成章。我有一個關(guān)系不錯的團隊做過反面教材。他們一開始為了追求安裝包體積堅持用Tauri改造一個Vue2的進銷存系統(tǒng)結(jié)果Rust編譯環(huán)境就把前端同事搞蒙了隨后WebView2在內(nèi)網(wǎng)老機器上的缺失問題又導(dǎo)致部署卡了快兩周。最后回到Electron兩天就把殼跑起來了。所以如果你不是對安裝包體積有硬性要求也不是有充裕的Rust人力Vue2項目就老老實實用Electron。2.3 我在選型時踩過的具體教訓(xùn)選Electron也不意味著隨便裝最新版就完事。Vue2的管理系統(tǒng)如果要照顧到Win7或者老舊的工控機Electron版本不能無腦追新。我自己的經(jīng)驗是如果目標(biāo)機器有Win7Electron版本最好控制在22.x以下如果全是Win10和Win11用當(dāng)前的LTS版本即可太老的版本反而會有安全補丁缺失的問題。另外還有一點容易被忽略Electron主進程代碼里不要引入跟DOM操作有關(guān)的瀏覽器API兩個世界的邊界從一開始就要分清楚。很多從Web轉(zhuǎn)過來的同事一開始會習(xí)慣性地在主進程里寫window、document實際跑起來直接報錯因為主進程跑在Node環(huán)境里界面UI和邏輯進程完全是兩套東西。這個邊界理清楚后面所有開發(fā)都不會亂。3. 開工前的改造先讓Vue2項目適配桌面容器3.1 調(diào)整前端構(gòu)建配置別讓打包出來的文件路徑帶坑你的Vue2項目在瀏覽器里跑得好好的不代表放進Electron里就直接能用。首先要處理的是資源路徑問題。Web項目的構(gòu)建產(chǎn)物默認(rèn)會生成index.html、static/js、static/css這樣的目錄并且在index.html里通過相對路徑或者絕對路徑去引用資源。當(dāng)你把構(gòu)建產(chǎn)物交給Electron通過file://協(xié)議加載時絕對路徑會直接失效因為file://協(xié)議下不存在/js/app.js這種根路徑概念。修改方式是在vue.config.js或者config/index.js里把publicPath改成相對路徑// vue.config.js module.exports { publicPath: ./, outputDir: dist, assetsDir: static, productionSourceMap: false }這里用./開頭構(gòu)建出來的index.html里的資源引用會變成./static/js/app.js這種相對路徑Electron加載本地文件時才找得到。這個細(xì)節(jié)不處理打包后十有八九是白屏而且報錯信息往往一閃而過很難定位。還有history路由的問題。Vue2項目如果用的是vue-router的history模式在Web服務(wù)器上有后端配置兜底但在Electron的file://協(xié)議下刷新一個深層路由頁面就會直接找不到文件。最簡單的辦法是把路由模式改成hash模式// router/index.js const router new VueRouter({ mode: hash, routes })別覺得換成hash模式就low了桌面應(yīng)用本來就不需要漂亮的URL路徑穩(wěn)定能跑才是第一位的。3.2 API地址和環(huán)境變量的桌面適配管理系統(tǒng)必然要連后端接口。Web端的習(xí)慣是把baseURL寫死在環(huán)境變量里區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境。到了桌面端情況變得稍微復(fù)雜一點同一個安裝包可能被不同的用戶使用不同客戶現(xiàn)場的接口地址不一樣甚至一個用戶電腦上同時連著多個不同的服務(wù)器。我的做法是在Electron主進程里準(zhǔn)備一個本地配置文件比如放在app.getPath(userData)目錄下的config.json把API基礎(chǔ)地址、端口、超時時間都放進去。前端在啟動時通過IPC向主進程請求這份配置動態(tài)設(shè)置axios的baseURL// 主進程 side const { app, ipcMain } require(electron) const fs require(fs) const path require(path) function getUserConfig() { const userDataPath app.getPath(userData) const configPath path.join(userDataPath, config.json) if (fs.existsSync(configPath)) { return JSON.parse(fs.readFileSync(configPath, utf-8)) } return { apiBaseUrl: http://127.0.0.1:8080 } } ipcMain.handle(get-config, () { return getUserConfig() })// 渲染進程 side const { ipcRenderer } require(electron) async function initConfig() { const config await ipcRenderer.invoke(get-config) // 這里把 axios 的 baseURL 設(shè)置為 config.apiBaseUrl axios.defaults.baseURL config.apiBaseUrl }這種設(shè)計的好處是換服務(wù)器地址不用重新打包只需要在目標(biāo)機器上改一個config.json文件或者做一個簡單的服務(wù)器地址配置界面往這個文件里寫數(shù)據(jù)就行。對于面向幾十個客戶現(xiàn)場分發(fā)管理系統(tǒng)的場景這個能力簡直是剛需。3.3 開發(fā)環(huán)境的雙開問題瀏覽器調(diào)試與桌面殼并行改造期間你肯定還是要用瀏覽器來調(diào)試Vue2頁面本身的所以開發(fā)模式不要把Electron殼和前端頁面綁死。我通常用npm run dev正常啟動webpack-dev-server然后在另一個終端運行一個僅包含主進程的Electron入口讓它加載http://localhost:8080這個地址。這樣Vue2頁面熱更新和Electron主進程調(diào)試互不打擾。主進程里判斷一下環(huán)境變量開發(fā)模式加載本地服務(wù)地址生產(chǎn)模式加載打包后的index.htmlconst isDev process.env.NODE_ENV development function createWindow() { const win new BrowserWindow({ width: 1280, height: 800 }) if (isDev) { win.loadURL(http://localhost:8080) win.webContents.openDevTools() } else { win.loadFile(path.join(__dirname, ../dist/index.html)) } }這樣一套模式跑下來前端團隊唯一要習(xí)慣的是每次改完主進程代碼要重啟Electron但這套改法對現(xiàn)有Vue2代碼的侵入性已經(jīng)拿到了最低點。4. 手寫Electron主進程從零搭出一個能跑的殼4.1 窗口骨架、單實例鎖和優(yōu)雅退出主進程的窗口管理看起來簡單實際要照顧的細(xì)節(jié)不少。管理系統(tǒng)的用戶通常不希望同時開多個窗口一個桌面里彈五六個一樣的系統(tǒng)窗口既混亂又容易被誤關(guān)。所以第一步就是給應(yīng)用加單實例鎖const gotTheLock app.requestSingleInstanceLock() if (!gotTheLock) { app.quit() } else { app.on(second-instance, () { const win getMainWindow() if (win) { if (win.isMinimized()) win.restore() win.show() win.focus() } }) app.whenReady().then(createWindow) }這段代碼的意思是用戶第二次雙擊圖標(biāo)不會新開窗口而是把已經(jīng)存在的窗口喚起置頂。管理系統(tǒng)的日常使用場景里這個體驗比網(wǎng)頁端好了不止一點半點——很多用戶習(xí)慣不關(guān)窗口直接鎖屏下班第二天雙擊圖標(biāo)把窗口彈出來繼續(xù)干活。窗口關(guān)閉行為也要單獨處理。管理系統(tǒng)關(guān)掉主窗口往往不是退出軟件而是隱藏到托盤。很多業(yè)務(wù)系統(tǒng)都期望它一直在后臺跑著隨時能接收WebSocket推送或者自動刷新數(shù)據(jù)。這里我習(xí)慣把關(guān)閉按鈕的行為改成隱藏const { Tray, Menu, nativeImage } require(electron) let tray null function onWindowClose(e) { if (!app.isQuiting) { e.preventDefault() win.hide() } } function createTray() { const icon nativeImage.createFromPath(path.join(__dirname, assets/tray.ico)) tray new Tray(icon) const contextMenu Menu.buildFromTemplate([ { label: 顯示主窗口, click: () { win.show() } }, { label: 退出系統(tǒng), click: () { app.isQuiting true; app.quit() } } ]) tray.setToolTip(內(nèi)部管理系統(tǒng)) tray.setContextMenu(contextMenu) }注意托盤圖標(biāo)需要單獨準(zhǔn)備一份小尺寸的ico或者png直接用應(yīng)用大圖標(biāo)縮下來會很丑。這一點屬于純?nèi)庋垠w驗細(xì)節(jié)但對用戶的第一印象影響很大。4.2 dev環(huán)境下自動重啟主進程主進程代碼在開發(fā)期間改動頻繁手動一個個CtrlC再重啟太影響效率。我見過有人給Electron主進程裝nodemon這個方向是對的但不建議裸用因為nodemon會把整個進程殺掉重啟結(jié)果渲染進程也被帶走開發(fā)窗口就會炸掉。我的做法是把主進程代碼用electron-reload或者直接在npm腳本里串聯(lián)兩個命令。實際更穩(wěn)妥的是用wait-on等待webpack-dev-server起來再啟動Electron{ scripts: { dev:main: cross-env NODE_ENVdevelopment electron ., dev:renderer: vue-cli-service serve --port 8080, dev: npm run dev:renderer npm run dev:main } }另一種做法是用concurrently把兩個命令并在一個終端里看日志但你依舊需要手動重啟主進程。好在主進程代碼邏輯通常不復(fù)雜改完重啟也就幾秒鐘不必過度工程化。4.3 主進程和渲染進程的IPC通信邊界設(shè)計前面已經(jīng)提到過Electron里渲染進程不能直接訪問Node.js的fs、path這些模塊。如果前端頁面碰到下載Excel文件并保存到指定目錄這種需求就必須通過IPC把文件內(nèi)容傳給主進程由主進程調(diào)用Node的文件系統(tǒng)去落地。IPC通信有一個設(shè)計原則渲染進程只發(fā)請求主進程做所有臟活累活。比如管理系統(tǒng)里常見的從服務(wù)器下載對賬單并保存渲染進程拿著后端返回的二進制流然后走IPC讓主進程調(diào)fs.writeFileSync// 主進程 ipcMain.handle(save-file, async (event, { filename, data }) { const { dialog } require(electron) const result await dialog.showSaveDialog({ defaultPath: filename }) if (!result.canceled) { fs.writeFileSync(result.filePath, Buffer.from(data)) return { success: true, path: result.filePath } } return { success: false, canceled: true } })// 渲染進程 const result await ipcRenderer.invoke(save-file, { filename: 9月對賬單.xlsx, data: excelBinary })注意data在IPC傳輸過程中會被序列化。如果是真的大文件流建議先寫到臨時目錄再傳路徑給主進程去移動避免一次傳幾十兆數(shù)據(jù)把IPC通道擠爆。管理系統(tǒng)的文件導(dǎo)出通常不會頻繁操作按上面的方式已經(jīng)夠用。還有一點要提前約定IPC方法的命名規(guī)范。別今天一個save-excel明天一個downloadFile項目一大你會自己都找不著。我見過有個團隊在主進程里維護一個handlers目錄每個功能一個文件文件名就是IPC方法名找起來非常直觀。5. 打包Windows安裝包electron-builder的完整實踐5.1 準(zhǔn)備工作electron-builder環(huán)境與目錄規(guī)范開發(fā)完殼之后下一步就是把它變成.exe安裝包。這塊目前生態(tài)里最成熟的是electron-builder。它可以把你的Electron應(yīng)用、前端構(gòu)建產(chǎn)物、Node依賴、圖標(biāo)、安裝腳本一起打成一個NSIS安裝程序。先給項目安一個清晰的目錄結(jié)構(gòu)。我建議這樣組織project-root/ ├── dist/ # Vue2 構(gòu)建產(chǎn)物npm run build 生成 ├── electron/ │ ├── main.js # 主進程入口 │ ├── preload.js # 預(yù)加載腳本可選 │ ├── config.js # 打包相關(guān)常量 │ └── build/ │ ├── icon.ico # 應(yīng)用安裝圖標(biāo) │ └── icon.png # 托盤小圖標(biāo) ├── package.json └── electron-builder.yml在package.json里必須把main字段指向主進程入口同時注意dependencies和devDependencies的劃分。打包時electron-builder會把dependencies里的內(nèi)容一并打包進app.asar如果你把所有依賴都放在devDependencies里生產(chǎn)環(huán)境運行時可能缺模塊。5.2 electron-builder.yml配置細(xì)節(jié)一份能直接工作的electron-builder.yml大概是這樣的appId: com.example.internalms productName: 內(nèi)部管理系統(tǒng) directories: output: release buildResources: electron/build files: - dist/**/* - electron/**/* - package.json win: target: - target: nsis arch: - x64 - ia32 icon: electron/build/icon.ico legalTrademarks: 本軟件僅供內(nèi)部使用 nsis: oneClick: false perMachine: false allowToChangeInstallationDirectory: true createDesktopShortcut: always shortcutName: 內(nèi)部管理系統(tǒng) artifactName: ${productName}-${version}-${arch}.${ext} electronVersion: 21.4.4幾個關(guān)鍵點解釋一下appId是應(yīng)用的唯一標(biāo)識別隨便填后期做自動升級、區(qū)分多款安裝在同機器上的應(yīng)用時都靠它。productName是用戶看到的應(yīng)用名稱可以跟項目名不一樣。directories.buildResources目錄里放的是打包用的圖標(biāo)和資源文件不會被打進安裝包。nsis配置里oneClick: false配合allowToChangeInstallationDirectory: true這樣在安裝時用戶能看到選擇安裝目錄的選項管理系統(tǒng)經(jīng)常要裝到非系統(tǒng)盤這個選項建議保留。還有個容易忽略的artifactName定義產(chǎn)出安裝包的文件名格式。如果你同時打x64和ia32兩個版本的包不帶${arch}的話兩個文件會互相覆蓋。5.3 版本號、產(chǎn)品名稱和圖標(biāo)踩坑記錄圖標(biāo)問題是最容易拖慢進度的。electron-builder要求Windows安裝圖標(biāo)必須是ico格式至少包含256x256這個尺寸。直接用在線工具把png轉(zhuǎn)ico經(jīng)常會出現(xiàn)多尺寸缺失裝完桌面快捷方式上看還行打開任務(wù)管理器或者應(yīng)用屬性里的圖標(biāo)卻低清得嚇人。我會用工具生成一個包含16/24/32/48/64/128/256多尺寸的完整ico這個花不了多少時間但產(chǎn)出的專業(yè)度完全不一樣。版本號也要注意規(guī)范。Windows安裝包要求版本號是a.b.c這樣三段式不能直接寫1.0。electron-builder會讀取package.json里的version字段然后應(yīng)用到安裝包屬性和程序信息里。如果后續(xù)要上自動更新版本號管理更要嚴(yán)格降版本會被更新邏輯直接拒絕。產(chǎn)品名稱方面盡量避免在productName里帶測試版臨時版這類字樣因為一旦安裝到系統(tǒng)里添加刪除程序的列表顯示的就是這個名稱以后正式版也要改名的話會很麻煩。5.4 安裝包體積大先別急著罵Electron很多第一次打包的人會驚訝一個幾百KB的前端項目打出來的安裝包居然有70MB甚至100MB以上。體積主要來源是electron內(nèi)置的Chromium內(nèi)核和Node.js運行時這部分占大頭。想壓縮是有限的但可以通過幾個手段改善在electron-builder.yml里加上files白名單確認(rèn)沒有把node_modules里用不到的包打進去。使用electron-builder自帶的asar壓縮把應(yīng)用代碼和依賴打包成一個歸檔文件默認(rèn)是開啟的不要手動關(guān)閉。刪除主進程代碼里不會用到的Electron模塊雖然Electron本身不會把全部模塊裝進每個應(yīng)用但你自己引入的依賴要清理干凈。如果用戶機器上普遍有較高配置只打包x64版本可以省掉ia32的那部分體積。管理系統(tǒng)通常部署在公司內(nèi)網(wǎng)或者客戶局域網(wǎng)安裝包體積用戶的感知沒有那么敏銳功能穩(wěn)定遠(yuǎn)比體積重要所以我對體積的態(tài)度是能減就減不強制追求。真正需要重點關(guān)照的反而是安裝速度和殺毒軟件誤報這后面專門說。6. 管理系統(tǒng)場景下繞不開的適配細(xì)節(jié)6.1 登錄憑證與Token的本地持久化Web管理系統(tǒng)的登錄態(tài)通常存在localStorage里換成桌面應(yīng)用之后繼續(xù)這樣用其實也可以但有一個更好的替代方案通過Electron的safeStorage接口把Token加密后存到用戶數(shù)據(jù)目錄。原因是localStorage雖然方便但明文存儲一旦被其他程序掃到Token泄露的風(fēng)險是實打?qū)嵉?。方案如下主進程提供方法寫入和讀取加密Tokenconst { safeStorage } require(electron) ipcMain.handle(set-token, (e, token) { const encrypted safeStorage.encryptString(JSON.stringify(token)) fs.writeFileSync(path.join(app.getPath(userData), token.bin), encrypted) }) ipcMain.handle(get-token, () { const filePath path.join(app.getPath(userData), token.bin) if (!fs.existsSync(filePath)) return null const encrypted fs.readFileSync(filePath) return JSON.parse(safeStorage.decryptString(encrypted)) })這樣即使有人拿到了這個文件沒有當(dāng)前用戶Windows賬戶的解密密鑰也無法還原明文。不過要留意的是safeStorage在部分Windows環(huán)境下依賴DPAPI如果用戶的賬戶權(quán)限太受限解密可能會失敗這種情況需要增加一個降級策略直接明文存儲但提示用戶注意風(fēng)險。管理系統(tǒng)一般跑在可控內(nèi)網(wǎng)環(huán)境這個權(quán)衡是可以接受的。6.2 Web端文件下載在桌面殼里的體驗升級管理系統(tǒng)總要導(dǎo)數(shù)據(jù)Web端導(dǎo)出Excel一般直接觸發(fā)瀏覽器下載。但在Electron殼里如果沿用window.open或者a標(biāo)簽下載的方式瀏覽器會自己接管下載流程用戶根本看不到保存路徑體驗很割裂。正確的做法是前端拿到后端返回的文件流或者下載URL后全部交給主進程處理。如果后端返回的是Blob前端先轉(zhuǎn)成ArrayBuffer再通過IPC給主進程如果是一個下載鏈接直接傳URL給主進程用session.defaultSession的下載管理器處理const { session } require(electron) ipcMain.handle(download-file, (event, { url, filename }) { const win BrowserWindow.fromWebContents(event.sender) session.defaultSession.once(will-download, (e, item) { const filePath path.join(app.getPath(downloads), filename) item.setSavePath(filePath) }) win.webContents.session.downloadURL(url) })這樣做的好處是一旦開始下載系統(tǒng)任務(wù)欄會出現(xiàn)一個真實的下載進度下載完成后文件就在用戶的下載目錄里跟瀏覽器行為一致。如果你不想讓文件存到默認(rèn)下載目錄可以在setSavePath里改成你指定的業(yè)務(wù)目錄。6.3 前端緩存的經(jīng)典問題桌面應(yīng)用不是瀏覽器標(biāo)簽頁Web端可以通過CtrlF5強制刷新桌面應(yīng)用沒有這么直觀的操作。管理系統(tǒng)部署后一旦前端代碼更新很常見的情況是老用戶打開桌面應(yīng)用還是舊的頁面因為Chromium把頁面緩存住了。處理方式有兩個層面。一是在構(gòu)建配置里給靜態(tài)資源加上帶hash的文件名升級時index.html引用的JS/CSS文件名變化緩存自然失效。這個Vue2項目默認(rèn)就會做。二是給Electron的窗口加上升級后的強制刷新邏輯每次軟件版本升級后第一次啟動時主動清理緩存app.on(browser-window-created, (event, win) { win.webContents.session.clearCache() })也可以把清緩存的操作綁定在版本更新后執(zhí)行避免每次啟動都清理導(dǎo)致首屏變慢。6.4 桌面端獨有的系統(tǒng)集成快捷鍵、開機啟動和右鍵菜單管理系統(tǒng)放到桌面上之后能不能充分利用系統(tǒng)的能力是用戶體驗好不好的分水嶺。我遇到過的實際需求包括開機自啟動。很多倉庫管理、門店收銀的系統(tǒng)需要電腦開機后自動進入系統(tǒng)省去人工打開。這塊可以調(diào)用app.setLoginItemSettingsapp.setLoginItemSettings({ openAtLogin: true, path: process.execPath })全局快捷鍵。比如倉庫錄入場景需要快速呼出掃碼輸入框可以在主進程里注冊快捷鍵const { globalShortcut } require(electron) globalShortcut.register(CommandOrControlShiftS, () { win.show() win.webContents.send(open-scan-dialog) })這會讓你在窗口不聚焦時也能喚起系統(tǒng)窗口。但要注意這些快捷鍵是全局的可能會跟用戶其他軟件沖突注冊時要提供可配置的開關(guān)不要寫死。打印和導(dǎo)出。管理系統(tǒng)里打印單據(jù)是個高頻操作Web端的window.print()在Electron里依然可用但更專業(yè)的做法是調(diào)用主進程的webContents.print()可以指定打印方向、邊距、隱藏頁眉頁腳還能靜默打印。這個能力是Web端很難超越的。7. 實際調(diào)試中踩過的坑從白屏到被殺軟攔截7.1 白屏的定位思路別慌先看devtools第一次把Vue2項目裝進Electron十有八九會遇到白屏。這里說的白屏指的是窗口框架正常打開但里面什么都沒有也沒有報錯彈窗。第一步永遠(yuǎn)是打開DevTools確認(rèn)報錯原因。手動打開的方式在主進程里臨時加一行代碼或者在菜單中加一個開發(fā)者工具的入口。常見的幾個白屏原因和對應(yīng)解法現(xiàn)象原因處理方式控制臺報Failed to load resource: net::ERR_FILE_NOT_FOUND靜態(tài)資源使用絕對路徑修改publicPath為./控制臺報ReferenceError: process is not defined渲染進程直接訪問Node API把相關(guān)邏輯移動到主進程或通過preload暴露頁面能加載但空白無報錯Vue路由用了history模式改成hash模式加載后立馬閃退主進程main字段指向錯誤檢查package.json的main字段白屏問題大多能在五分鐘內(nèi)定位難點其實是窗口一閃而過的狀態(tài)這時候可以給main.js加一個process.on(uncaughtException)監(jiān)聽把異常信息寫進日志文件這樣用戶現(xiàn)場出問題時至少能拿到排查線索。7.2 低配Windows機器上的卡頓與渲染優(yōu)化管理系統(tǒng)界面往往充滿表格、圖表動輒上千行的數(shù)據(jù)在Electron里大面積渲染時會卡。普通Web用戶還能換個好電腦桌面化之后用戶會直接把卡頓歸咎于這個軟件寫得差。針對低配機器的優(yōu)化我在Eectron殼項目里常用三招。第一是開啟窗口的backgroundThrottling: false避免窗口被切到后臺后定時器和請求被強制節(jié)流這個選項對管理系統(tǒng)尤其實用因為很多系統(tǒng)要接收服務(wù)端推進來的消息被節(jié)流會導(dǎo)致看起來沒收到。第二是關(guān)閉不需要的硬件加速。有些管理系統(tǒng)的部署環(huán)境是虛擬機GPU驅(qū)動不完整默認(rèn)開啟硬件加速反而會導(dǎo)致頁面花屏?？梢栽趩訒r加上app.disableHardwareAcceleration()不過不要全局無腦關(guān)閉如果確需硬件加速的場景比如地圖、視頻監(jiān)控關(guān)掉之后性能會下降。可以做一個配置開關(guān)默認(rèn)關(guān)閉需要時再打開。第三是主進程里控制好創(chuàng)建BrowserWindow的數(shù)量。管理系統(tǒng)如果還要開獨立彈窗頁面比如報表全屏模式務(wù)必復(fù)用同一個窗口或者用webContents的導(dǎo)航切換而不是new BrowserWindow一次開一個窗。窗口太多內(nèi)存直接崩。7.3 安裝包被殺毒軟件攔截、代碼簽名問題在真實分公司部署時我遇到過不止一次殺毒軟件把安裝包當(dāng)木馬隔離的情況。原因倒也不復(fù)雜Electron應(yīng)用體積大內(nèi)部結(jié)構(gòu)復(fù)雜某些不嚴(yán)格的殺毒軟件會把asar歸檔和自動更新程序誤判為可疑行為。應(yīng)對手段從物理上能解決一部分給安裝包做代碼簽名。Windows系統(tǒng)對未簽名的程序會有SmartScreen攔截提示W(wǎng)indows已保護你的電腦用戶要點更多信息才能繼續(xù)運行。這一步足以勸退一大半業(yè)務(wù)人員。通過代碼簽名后這個提示會變成正常的品牌信息信任度高很多。代碼簽名證書需要企業(yè)資質(zhì)申請在某正規(guī)CA機構(gòu)購買價格不便宜但管理系統(tǒng)如果是正式商業(yè)產(chǎn)品這筆成本不能省。如果沒有簽名證書只能靠加白名單管理。常見做法是在安裝文檔里寫清楚內(nèi)網(wǎng)IT人員部署時統(tǒng)一處理。另外在electron-builder里關(guān)閉自動更新檢查相關(guān)的進程autoUpdater也能降低殺毒軟件對后臺聯(lián)網(wǎng)行為的敏感度。7.4 老系統(tǒng)兼容性的最后兜底如果你面對的終端用戶里還有Windows 7 SP1那有幾個細(xì)節(jié)必須提前確認(rèn)。第一個是electron版本選型新版Electron從32開始已經(jīng)不支持Win7所以得選擇技術(shù)路線時確定好版本。第二個是運行時依賴Win7機器上需要提前裝好Microsoft Visual C RedistributableElectron依賴它很多內(nèi)網(wǎng)老爺機沒裝裝上之后就正常運行。第三個是高分屏適配老的1366x768分辨率屏幕上管理系統(tǒng)原本按1920寬度設(shè)計的布局會嚴(yán)重擠壓要在CSS層面給桌面殼單獨做一套中等寬度的適配斷點。我實際見過的情況是同一個Vue2管理系統(tǒng)在Win7的聯(lián)想老臺式機上跑得非常穩(wěn)反而在某個精簡版Win10的虛擬機上各種圖標(biāo)缺失。老系統(tǒng)兼容性問題沒有銀彈最好的辦法是發(fā)布前在一臺跟客戶現(xiàn)場配置差不多的機器上做一輪冒煙測試重點過一遍登錄、首頁、數(shù)據(jù)錄入、導(dǎo)出、托盤、自動更新這幾個環(huán)節(jié)。8. 升級與維護這層殼后續(xù)應(yīng)該怎么疊功能8.1 自動升級的落地方式桌面應(yīng)用的升級不能依賴用戶自覺去官網(wǎng)下載新版本管理系統(tǒng)的升級最好是開機檢查更新一鍵安裝。electron-builder生態(tài)里自帶electron-updater模塊配合publish配置可以做到增量升級。配置好發(fā)布地址后在應(yīng)用啟動時檢查更新const { autoUpdater } require(electron-updater) autoUpdater.autoDownload true autoUpdater.autoInstallOnAppQuit true function checkForUpdates() { autoUpdater.checkForUpdates() } autoUpdater.on(update-downloaded, () { const dialogOpts { type: info, buttons: [現(xiàn)在重啟, 稍后重啟], message: 新版本已下載重啟應(yīng)用完成更新。 } dialog.showMessageBox(dialogOpts).then((result) { if (result.response 0) { autoUpdater.quitAndInstall() } }) })需要注意electron-updater要求安裝包配置里保留latest.yml文件信息部署時要把這個文件一并上傳到文件服務(wù)器。內(nèi)網(wǎng)環(huán)境如果禁用外網(wǎng)可以把更新包放到file://協(xié)議能訪問的本地共享目錄方案是通用的。8.2 從Web端遷到桌面殼之后架構(gòu)上多出來的可能性當(dāng)你把Vue2管理系統(tǒng)裝進Electron殼之后很多以前在Web端沒法做或者做得很別扭的事情都有了新解法。典型的是本地數(shù)據(jù)庫管理系統(tǒng)如果在某些現(xiàn)場需要離線錄入就可以在殼內(nèi)集成一個better-sqlite3或者SQLite把數(shù)據(jù)先攢在本地等網(wǎng)絡(luò)恢復(fù)再同步到服務(wù)端。托盤消息推送也能做到真正的系統(tǒng)級服務(wù)端通過WebSocket推來一條訂單提醒主進程收到后直接在右下角彈一個Notification不需要用戶打開網(wǎng)頁才能看到。微信掃碼登錄、硬件設(shè)備調(diào)用掃碼槍、打印機、讀卡器也都可以通過主進程的Node能力直接對接不再受瀏覽器沙箱限制。這里要提醒的是即便你有這些擴展空間也不要在一開始就把所有功能都塞進來。管理系統(tǒng)的核心價值是業(yè)務(wù)閉環(huán)桌面殼最大的意義是減少使用阻力而不是把客戶端做成一個全功能平臺。每加一個本地能力相應(yīng)的升級、兼容、數(shù)據(jù)備份問題就多一層量力而行。8.3 我建議的后續(xù)演進節(jié)奏如果你手頭正好有一個Vue2管理系統(tǒng)要桌面化按下面這個節(jié)奏推進比較穩(wěn)第一階段先把殼跑通實現(xiàn)安裝、啟動、登錄、數(shù)據(jù)展示這些基礎(chǔ)流程中間遇到的白屏、路徑、路由問題集中解決。第二階段再把Web端不好用的細(xì)節(jié)做桌面化適配包括文件導(dǎo)出、托盤關(guān)閉、快捷鍵和開機啟動。第三階段把自動更新和日志埋點加進去這樣后續(xù)迭代才有數(shù)據(jù)支撐。最后一步才是本地數(shù)據(jù)庫、硬件交互這些進階能力。我在幾個項目里都是這么推進的每一階段都在真實業(yè)務(wù)環(huán)境里可用避免了憋大招最后崩盤的風(fēng)險。一個穩(wěn)定可靠的管理系統(tǒng)桌面版通常不需要炫酷的外表但一定要能讓用戶在平平無奇的辦公環(huán)境中不知不覺用下去。最后分享一個小經(jīng)驗給Vue2項目做Electron殼改造最難的不是技術(shù)本身而是迭代節(jié)奏和需求邊界。團隊里有人會期待著順手把界面重構(gòu)了有人會想著趁這個機會換掉Vue2——這些都要堅決攔住。殼就是殼它的任務(wù)是讓現(xiàn)有業(yè)務(wù)更穩(wěn)定地觸達(dá)用戶。等你真正把殼跑穩(wěn)了再談技術(shù)棧革命也不遲。