这里我的vue3+vite项目已经有了，在这基础上使用electron转换成桌面应用。

1、获取electron配置文件

首先可以执行以下命令，从electron的官网下载案例，下载会比较慢，可以直接访问git仓库，下载代码。

git clone https://github.com/electron/electron-quick-start

1. 下载以后主要是要用到代码里的main.js和preload.js两个文件。如果不下载，直接复制下面的两个文件代码即可。

2. main.js

// Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron')
const path = require('path')

function createWindow () {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // and load the index.html of the app.
  mainWindow.loadFile('index.html')

  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

3. preload.js

// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

4. 把以上两个文件放到自己的vue项目文件目录下

在根目录下新建了一个electron文件夹，里面放两个js文件

2、项目配置

• 安装依赖

electron不多说。concurrently和 wait-on解释一下。
开发环境的运行条件是，先运行vite启动服务，然后electron去加载本地服务url。这里需要安装两个依赖。

concurrently：阻塞运行多个命令，-k参数用来清除其它已经存在或者挂掉的进程
-wait-on：等待资源，此处用来等待url可访问

npm install electron --save-dev
npm install concurrently wait-on --save-dev

2. electron/main.js

根据需求，我添加了Menu.setApplicationMenu(null)隐藏菜单栏，frame是否展示顶部导航的配置，默认为true。mainWindow.loadFile(‘index.html’)修改成了mainWindow.loadURL（关键），具体配置如下。

// Modules to control application life and create native browser window
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')

//这里的配置手动写的，也可以使用cross-env插件配置
const mode = 'development'

/*隐藏electron创听的菜单栏*/
Menu.setApplicationMenu(null)

function createWindow() {
    // Create the browser window.
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        frame: true /*是否展示顶部导航  去掉关闭按钮  最大化最小化按钮*/ ,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
        },
    })

    // and load the index.html of the app.
    // mainWindow.loadFile('index.html')  修改成如下

    mainWindow.loadURL(mode === 'development' ? 'http://localhost:2103' : `file://${path.join(__dirname, '../dist/index.html')}`)

    // Open the DevTools.
    if (mode === 'development') {
        mainWindow.webContents.openDevTools()
    }
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
    createWindow()

    app.on('activate', function() {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

3. vite.config.js

配置base: ‘./’

4. package.json

main：main.js修改成main：electron/main.js。添加electron和electron:serve指令

    "main": "electron/main.js",
    "scripts": {
        "dev": "vite --host",
        "serve": "vite preview",
        "build": "vite build",
        "electron": "wait-on tcp:2103 && electron . --mode=development ",
        "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\""
    },

5. 运行项目

npm run electron:serve

如果运行不成功或者成功之后白屏，可查看以下几个关键配置

端口一致

3、打包生成桌面应用

1. 安装打包插件 electron-builder

npm install electron-builder --save-dev

2. package.json添加electron:build命令，和build配置

    "main": "electron/main.js",
    "scripts": {
        "dev": "vite --host",
        "serve": "vite preview",
        "build": "vite build",
        "electron": "wait-on tcp:2103 && electron . --mode=development ",
        "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
        "electron:build": "npm run build && electron-builder"
    },
     "build": {
        "appId": "8a06282fb08c48eeacb15bfbe4d3a35b",
        "productName": "ElectronApp",
        "copyright": "Copyright © 2022 <项目名称>",
        "mac": {
            "category": "public.app-category.utilities"
        },
        "nsis": {
            "oneClick": false,
            "allowToChangeInstallationDirectory": true
        },
        "files": [
            "dist/**/*",
            "electron/**/*"
        ],
        "directories": {
            "buildResources": "assets",
            "output": "dist_electron"
        }
    }

3. 注意electron/main.js里的配置

4. 执行打包命令

npm run electron:build

出现报错Error: Cannot find module ‘fs/promises’

搜索了下是node版本太低，目前是12.22.7，换成16.15.0再次打包成功。

成功后当前项目下出现dist_electron文件夹，即为桌面应用安装包。

提示：多次打包如果报错，可删除dist_electron文件夹，再进行打包。

参考：
Vite+Electron快速构建一个VUE3桌面应用