vite结合electron构建前端桌面应用程序

npm create vite@latest

yarn create vite

Need to install the following packages:
  create-vite@3.2.1
Ok to proceed? (y) y

Project name: » vite-project

Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

Done. Now run:
  cd vite-project
  npm install
  npm run dev

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

// app 控制应用程序的事件生命周期（相当于应用程序）
// BrowserWindow 创建并控制浏览器窗口（相当于打开桌面弹框）
import { app, BrowserWindow, Menu } from 'electron'
import path from 'path'
// 定义全局变量，获取窗口实例
let win: BrowserWindow | null;
/**
 * 创建一个窗口
 */
const createWindow = () => {
    win = new BrowserWindow({
        width: 1200,
        height: 800,
        center: true,
        // autoHideMenuBar: true,
        backgroundColor: 'rgb(0, 0, 0)',
        webPreferences: {
            devTools: true,
            // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
            nodeIntegration: true,
            contextIsolation: false,
        }
    })
    // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
    } else {
        // Load your file
        win.loadFile(path.resolve(__dirname, '../dist/index.html'));
    }
    // 关闭窗口时就关闭程序，避免占用过多资源
    win.on("close", () => {
        win = null
    })
}
// 自定义菜单
const createMenu = () => {
    const Menus: any = [
        {
            label: 'Files',
            submenu: [
                {
                    label: '网页版',
                    role: 'help',
                    submenu: [{
                        label: '网页版',
                        click: function () {
                            alert('网页版')
                        }
                    }]
                },
                {
                    label: '帮助',
                    role: 'help',
                    submenu: [{
                        label: '帮助文档',
                        click: function () {
                            alert('帮助文档')
                        }
                    }]
                }
            ]
        }
    ];
    const mainMenu = Menu.buildFromTemplate(Menus);
    Menu.setApplicationMenu(mainMenu);
}
// 初始化app（在 Electron 完成初始化时触发），挂载上面创建的 桌面应用程序窗口
app.whenReady().then(() => {
    createWindow()
    // createMenu()
})

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            entry: 'electron/main.ts',
        }),
    ],
})

"main": "dist-electron/main.js",

npm run dev

npm install electron-builder -D 

"build": "vue-tsc --noEmit && vite build && electron-builder"

"build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
        "output": "release/"
    },
    "files": [
        "dist/**/*",
        "dist-electron/**/*"
    ],
    "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": "版本更新的具体内容"
    }
},

npm run build

npm install -g asar

asar extract 源app.asar文件 目标解压文件夹

asar pack 源解压文件夹 目标asar压缩文件名(app.asar)

win.loadFile(path.resolve(__dirname, '../dist/index.html'));