Electron是一個使用 JavaScript、HTML 和 CSS 構建桌面應用程序的框架。 嵌入 Chromium 和 Node.js 到 二進制的 Electron 允許您保持一個 JavaScript 代碼代碼庫并創建 在Windows上運行的跨平臺應用 macOS和Linux——不需要本地開發 經驗。 https://www.electronjs.org/

目錄

• 01.打包封裝
• • 1.創建vue項目，或者使用現有項目
  • 2.安裝electron
  • 3.打包exe
  • 4.封裝
• 02.配置electron 窗口BrowserWindow

01.打包封裝

1.創建vue項目，或者使用現有項目

vue create xxxx

2.安裝electron

vue add electron-builder

選擇版本

測試

electron

3.打包exe

npm run electron:build

雙擊app.exe

現在還有個問題 它不是單個可執行文件，那么就用到了Enigma Virtual Box

4.封裝

下載好Enigma Virtual Box 選擇瀏覽

輸出虛擬文件名稱，這里選的桌面
點擊下方的添加選擇添加文件夾遞歸

把win-unpacked文件夾下除了剛選的主程序app.exe之外的所有文件選上
點擊打包


運行測試，單文件exe

02.配置electron 窗口BrowserWindow

文檔https://www.electronjs.org/zh/docs/latest/api/browser-window

更換背景顏色 const win = new BrowserWindow({ backgroundColor: '#2e2c29' }) width 整數型 (可選) - 窗口的寬度（以像素為單位）。 默認值為 800。 height 整數型 (可選) - 窗口的高度（以像素為單位）。 默認值為 600。 x Interger (可選) - (必選 如果使用了y) 窗口相對于屏幕左側的偏移量。 默認值為將窗口居中。 y Integer (可選) - (必選 如果使用了x) 窗口相對于屏幕頂端的偏移量。 默認值為將窗口居中。 useContentSize boolean (可選) - width 和 height 將設置為 web 頁面的尺寸(譯注: 不包含邊框), 這意味著窗口的實際尺寸將包括窗口邊框的大小，稍微會大一點。 默認值為 false. center boolean (可選) - 窗口是否在屏幕居中. 默認值為 false. 整型（可選）-窗口的最小寬度。默認為0 默認值為 0. minHeight Integer(可選) - 窗口的最小高度。 默認值為 0. maxWidth Integer(可選)-窗口的最大寬度。 默認值不限 maxHeight Integer (可選) - 窗口的最大高度。 默認值不限 resizable boolean (可選) - 窗口大小是否可調整。 默認值為 true。 movable boolean (可選) macOS Windows - 窗口是否可移動。 在 Linux 上未實現。 默認值為 true。 minimizable boolean (可選) macOS Windows - 窗口是否可最小化。 在 Linux 上未實現。 默認值為 true。 maximizable boolean (可選) macOS Windows - 窗口是否最大化。 在 Linux 上未實現。 默認值為 true。 closable boolean (可選) macOS Windows - 窗口是否可關閉。 在 Linux 上未實現。 默認值為 true。 focusable boolean (可選) - 窗口是否可以聚焦. 默認值為 true。 在 Windows 中設置 focusable: false 也意味著設置了skipTaskbar: true. 在 Linux 中設置 focusable: false 時窗口停止與 wm 交互, 并且窗口將始終置頂。 alwaysOnTop boolean (可選) - 窗口是否永遠在別的窗口的上面。 默認值為 false. fullscreen boolean (可選) - 窗口是否全屏. 當明確設置為 false 時，在 macOS 上全屏的按鈕將被隱藏或禁用. 默認值為 false. fullscreenable boolean (可選) - 窗口是否可以進入全屏狀態. 在 macOS上, 最大化/縮放按鈕是否可用 默認值為 true。 simpleFullscreen boolean (可選) macOS - 在 macOS 上使用 pre-Lion 全屏。 默認值為 false. skipTaskbar boolean (可選) macOS Windows - 是否在任務欄中顯示窗口。 默認值為 false. kiosk boolean (可選) - 窗口是否進入kiosk模式。 默認值為 false. titlestring(可選) - 默認窗口標題 默認為"Electron"。 如果由loadURL()加載的HTML文件中含有標簽<title>，此屬性將被忽略。 icon (NativeImage | string) (可選) - 窗口圖標。 在 Windows 上推薦使用 ICO 圖標來獲得最佳的視覺效果, 默認使用可執行文件的圖標. show boolean (可選) - 窗口是否在創建時顯示。 默認值為 true。 paintWhenInitiallyHiddenboolean(可選) - 當show為false并且渲染器剛剛被創建時，它是否應激活。 為了讓document.visibilityState 在show: false的情況下第一次加載時正確地工作，你應該把這個設置成false. 設置為 false 將會導致ready-to-show 事件不觸發。 默認值為 true。 frame boolean (可選) - 設置為 false 時可以創建一個無邊框窗口 默認值為 true。 parent BrowserWindow (可選) - 指定父窗口 默認值為 null. modal boolean (可選) - 當前是否為模態窗口。 只有當窗口是子窗口時才起作用。 默認值為 false. acceptFirstMouse boolean (可選) macOS - 點擊 非活動窗口是否會穿透到 web contents。 在 macOS 中默認為 false。 此選項在其他平臺上不可配置。 disableAutoHideCursor boolean (可選) - 是否在打字時隱藏光標。 默認值為 false. autoHideMenuBar boolean (可選) - 自動隱藏菜單欄，除非按了Alt鍵。 默認值為 false. enableLargerThanScreen boolean (可選) macOS - 使窗口尺寸可大于屏幕的大小。 僅與 macOS 相關，其他操作系統默認允許大于屏幕的窗口。 默認值為 false. backgroundColor string (可選) - 窗口背景色，格式為 Hex, RGB, RGBA, HSL, HSLA 或 CSS 命名顏色。 如果 transparent 設置為 true，則支持#AARRGGBB格式的透明。 默認值為 #FFF（白色）。 更多詳細信息，請參閱 win.setBackgroundColor。 hasShadow boolean (可選) - 窗口是否有陰影. 默認值為 true。

總結

以上是生活随笔為你收集整理的electron-vue 打包桌面应用程序并封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。