vite+electron 项目构建

1. 创建vite项目

npm init vite

2.切换node.js 本文创建是基于node.js v18.20.2版本

nvm use 18

3. 安装依赖

npm install

4. electron用npm安装几次都失败了，所以使用了pnpm，先安装一个pnpm

npm install -g pnpm

5. 安装electron、electron-builder

pnpm install electron electron-builder -D  

6. 根目录下新建main.js,代码如下：

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 800,
        // webPreferences: {
        //   nodeIntegration: true,
        //   contextIsolation: false
        // }
    })

    // win.loadFile('index.html')
    win.loadURL('http://localhost:5174')

    // 打开开发者工具
    // win.webContents.openDevTools()
}

app.on('window-all-closed', () => {
    // 对于MacOS系统 -> 关闭窗口时不会直接推出应用
    if (process.platform === 'darwin') { // mac
        app.quit()
    }
})

app.whenReady().then(() => {
    createWindow()

    // 在MacOS下，当全部窗口关闭，点击dock图标，窗口再次打开。
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow()
        }
    })
})

7. 修改package.json

"main": "main.js",
"start": "electron ."

Electron官方文档

https://www.electronjs.org/zh/docs/latest/