1. 新建一個Vue項目

????????新建一個vue項目，或者在已經寫好的vue項目上操作

2. 安裝依賴包

????????需要安裝的包有2個

????????electron

????????electron-builder

????????安裝失敗的，可看另外一篇解決方法https://blog.csdn.net/Anorry/article/details/144061069?spm=1001.2014.3001.5501

3. 在項目根目錄創建文件夾，存放文件

在根目錄新建 electron 文件夾，文件夾下存放兩個文件：main.js(主進程)、preload.js（渲染進程）

main.js

const { app, BrowserWindow, Menu } = require("electron");
const path = require("path");
const NODE_ENV = process.env.NODE_ENV;function createWindow() {Menu.setApplicationMenu(null);// 創建瀏覽器窗口const mainWindow = new BrowserWindow({show: false,minWidth: 1440,minHeight: 900,webPreferences: {partition: String(+new Date()),preload: path.join(__dirname, "preload.js"),},});mainWindow.maximize();mainWindow.show();// 如果是開發環境就把當前運行的web端口做成客戶端預覽// 如果是生產環境就把打包后的index做成客戶端預覽mainWindow.loadURL(NODE_ENV === "development"? "http://localhost:8080": `file://${path.join(__dirname, "../dist/index.html")}`);
}// 這段程序將會在 Electron 結束初始化
// 和創建瀏覽器窗口的時候調用
// 部分 API 在 ready 事件觸發后才能使用。
app.whenReady().then(() => {createWindow();app.on("activate", function () {// 通常在 macOS 上，當點擊 dock 中的應用程序圖標時，如果沒有其他// 打開的窗口，那么程序會重新創建一個窗口。if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});// 除了 macOS 外，當所有窗口都被關閉的時候退出程序。 因此，通常對程序和它們在
// 任務欄上的圖標來說，應當保持活躍狀態，直到用戶使用 Cmd + Q 退出。
app.on("window-all-closed", function () {if (process.platform !== "darwin") app.quit();
});

preload.js

window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}})

4. 在 vite.config.js 內配置

配置基本路徑 ./ 防止出現打包后打開頁面空白

publicPath: './',
transpileDependencies: true,

5. 在 package.json 內配置入口文件，配置一下運行命令

"main": "electron/main.js","electron": "wait-on tcp:8090 && cross-env NODE_ENV=development electron .",

6. 安裝兩個庫

• cross-env：該庫讓開發者只需要注重環境變量的設置，而無需擔心平臺設置
• wait-on：等待資源，此處用來等待url可訪問

為了使項目和electron正常運行，需要先運行項目，使得其開發服務器的url可以正常訪問，然后再開啟electron去加載url。

此處需要安裝兩個庫

7. 配置electron打包命令和配置項

在前面我們安裝了 electron-builder 依賴，所以這里無需安裝

把下面代碼，放到 package.json 內，與 dependencies 同級

"build": {"appId": "com.test","productName": "electron打包測試","copyright": "Copyright ? 2023","mac": {"category": "public.app-category.utilities","icon": "public/icons/icon.icns"},"win": {},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets","output": "dist_electron"}}

"electron:build": "vite build  --mode production && electron-builder",

8. 運行命令 npm run electron:build 打包

打包成功后，會在根目錄出現一個 dist_electron 文件夾，文件夾下會有一個 .exe 應用程序