https://www.electronjs.org/
https://www.electron.build/

1. 創(chuàng)建一個vue3項(xiàng)目

可參考之前的筆記將Vue3項(xiàng)目部署到Github Pages - 簡書 (jianshu.com)

2. 安裝Electron

$ npm install electron -D
$ npm install vite-plugin-electron -D

根目錄下新建 electron/index.ts，修改vite.config.ts配置文件

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'

export default defineConfig({
  // ...
  plugins: [
    // ...
   electron({
      entry: "electron/index.ts"
    })
  })
  ],
})

編寫electron/index.ts

// electron/index.ts

import { app, BrowserWindow } from 'electron'
import path from 'path'

let win: BrowserWindow | null;

const createWindow = () => {
  win = new BrowserWindow({
    webPreferences: {
      devTools: true,
      contextIsolation: false,
      nodeIntegration: true
    }
  })
  if (process.env.NODE_ENV != 'development') {
    win.loadFile(path.join(__dirname, "../dist/index.html"));
  } else {
    win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`);
  }
}

app.whenReady().then(createWindow)

在package.json添加main字段

{
  // ...
  "main": "dist-electron/index.js"
}

3. 打包Electron

$ npm i electron-builder -D

package json 配置 build 修改npm run build命令

// package.json
{
  // ...
  "scripts": {
    "app:dist": "vite build && electron-builder",
  },
  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright ? 2022 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist-electron",
      "dist"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8080"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具體內(nèi)容"
    }
  }

nsis配置參數(shù)

{
  "oneClick": false, // 創(chuàng)建一鍵安裝程序還是輔助安裝程序（默認(rèn)是一鍵安裝）
  "allowElevation": true, // 是否允許請求提升，如果為false，則用戶必須使用提升的權(quán)限重新啟動安裝程序 （僅作用于輔助安裝程序）
  "allowToChangeInstallationDirectory": true, // 是否允許修改安裝目錄 （僅作用于輔助安裝程序）
  "installerIcon": "public/timg.ico", // 安裝程序圖標(biāo)的路徑
  "uninstallerIcon": "public/timg.ico", // 卸載程序圖標(biāo)的路徑
  "installerHeader": "public/timg.ico", // 安裝時頭部圖片路徑（僅作用于輔助安裝程序）
  "installerHeaderIcon": "public/timg.ico", // 安裝時標(biāo)題圖標(biāo)（進(jìn)度條上方）的路徑（僅作用于一鍵安裝程序）
  "installerSidebar": "public/installerSiddebar.bmp", // 安裝完畢界面圖片的路徑，圖片后綴.bmp，尺寸164*314 （僅作用于輔助安裝程序）
  "uninstallerSidebar": "public/uninstallerSiddebar.bmp", // 開始卸載界面圖片的路徑，圖片后綴.bmp，尺寸164*314 （僅作用于輔助安裝程序）
  "uninstallDisplayName": "${productName}${version}", // 控制面板中的卸載程序顯示名稱
  "createDesktopShortcut": true, // 是否創(chuàng)建桌面快捷方式
  "createStartMenuShortcut": true, // 是否創(chuàng)建開始菜單快捷方式
  "shortcutName": "SHom", // 用于快捷方式的名稱，默認(rèn)為應(yīng)用程序名稱
  "include": "script/installer.nsi", // NSIS包含定制安裝程序腳本的路徑，安裝過程中自行調(diào)用  (可用于寫入注冊表 開機(jī)自啟動等操作)
  "script": "script/installer.nsi", // 用于自定義安裝程序的NSIS腳本的路徑
  "deleteAppDataOnUninstall": false, // 是否在卸載時刪除應(yīng)用程序數(shù)據(jù)（僅作用于一鍵安裝程序）
  "runAfterFinish": true, // 完成后是否運(yùn)行已安裝的應(yīng)用程序（對于輔助安裝程序，應(yīng)刪除相應(yīng)的復(fù)選框）
  "menuCategory": false, // 是否為開始菜單快捷方式和程序文件目錄創(chuàng)建子菜單，如果為true，則使用公司名稱
}

執(zhí)行

$ npm run app:dist

參考
https://xiaoman.blog.csdn.net/article/details/126063804