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

最新推荐文章于 2024-10-27 01:04:52 发布

姑老爷呀

最新推荐文章于 2024-10-27 01:04:52 发布

阅读量2.9k

点赞数

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/pfourfire/article/details/126974424

版权

本文档介绍了如何使用vite初始化项目，结合electron-builder进行打包配置，包括创建主进程、解决资源加载问题、配置开发环境的热更新以及打包成exe文件的过程。在开发环境，利用concurrently和wait-on工具实现热更新，而在打包过程中，通过electron.config.json配置文件确保资源正确打包。最终，成功创建了一个具备热更新和桌面应用打包功能的项目。

摘要由CSDN通过智能技术生成

创一个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()})
})

// 除了 macOS