【electron】 vite + electron-builder 打包配置

创一个vite项目

 npm init vite 

安装打包工具

 npm i -D electron // 20.1.0npm i -D electron-builder // 23.3.3 

electron是开发时运行环境，electron-builder是打包exe用的。

配置桌面环境

打开 electron 官网，找到“快速开始”。基本上看完这一章就可以实现将页面通过桌面程序运行出来了。

创建 主进程 main.js

项目更目录下创建 main.js文件与 preload.js 文件, 代码可以直接复制官网示例

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

const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// 加载 index.htmlmainWindow.loadFile('index.html')// 打开开发工具// mainWindow.webContents.openDevTools()
}

// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {// 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()})
})