当前位置: 首页 > backend >正文

将 Vue 3 + Vite + TS 项目打包为 .exe 文件

使用 electron-builder打包:

一、安装依赖

npm install electron electron-builder --save-dev

二、创建 Electron 入口文件:在项目根目录下创建 electron/main.js 文件

import { app, BrowserWindow } from 'electron';
import path from 'path';
import { fileURLToPath } from 'url';// 兼容 ESM 的 __dirname
const __dirname = path.dirname(fileURLToPath(import.meta.url));let win: BrowserWindow | null = null;function createWindow() {win = new BrowserWindow({width: 1920,height: 1080,webPreferences: {nodeIntegration: true,contextIsolation: false,},});// 开发环境下加载 Vite 开发服务器if (process.env.NODE_ENV === 'development') {win.loadURL('http://localhost:5173');win.webContents.openDevTools();} else {// 生产环境下加载打包后的文件win.loadFile(path.join(__dirname, '../dist/index.html'));}
}app.whenReady().then(createWindow);// 所有窗口关闭时退出应用(macOS 除外)
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit();
});// macOS 下点击 Dock 图标重新打开窗口
app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindows();
});// 只在开发模式下启用热重载
if (process.env.NODE_ENV === 'development') {// 开发模式下的热重载逻辑require('electron-reload')(__dirname, {electron: path.join(__dirname, '..', 'node_modules', '.bin', 'electron'),});
}

三、修改 package.json:添加/修改以下配置:

{"main": "electron/main.js","scripts": {"electron:serve": "vite build && electron .","electron:build": "vite build && electron-builder --dir"},"build": {"productName": "test","files": ["dist/**/*","electron/**/*"],"win": {"target": "nsis"},"mac": {"target": "dmg"},"linux": {"target": "AppImage"}}
}

四、构建应用

npm run electron:build

可能会遇到的问题:

1、打包后出现白屏或者黑屏

http://www.xdnf.cn/news/15471.html

相关文章:

  • Kubernetes 架构原理与集群环境部署
  • Mybatis05-动态sql
  • Java实现word、pdf转html保留格式
  • HTTP性能优化实战技术
  • 【电脑】显卡(GPU)的基础知识
  • 暑期算法训练.1
  • 【解决】联想电脑亮度调节
  • 行为模式-状态模式
  • 前端打包自动压缩为zip--archiver
  • MongoDB数据问题说明
  • 大模型在1型糖尿病肾病V期预测及治疗方案制定中的应用研究
  • 《大数据技术原理与应用》实验报告五 熟悉 Hive 的基本操作
  • 用uniapp开发鸿蒙应用(暂停更新-根据项目更新,现在项目未开始)
  • LangChain智能体开发实战:从零构建企业级AI助手
  • 17、鸿蒙Harmony Next开发:状态管理(组件拥有的状态和应用拥有的状态)
  • 3种添加视频水印的加密方式,守护视频安全!
  • OpenCV 对比度拉伸图像增强函数contrastStretching()
  • 基于UDP/IP网络游戏加速高级拥塞控制算法(示意:一)
  • 21-C#的委托简单使用-1
  • 【zynq7020】PS的“Hello World”
  • Android弹窗
  • 【C++】初识C++(1)
  • 映美打印机-URL页面打印
  • AI产品经理面试宝典第20天:AI+金融场景相关面试题及回答指导
  • 缓存穿透的“黑暗森林”假说——当攻击者学会隐藏恶意流量
  • 02 51单片机之LED闪烁
  • Knife4j快速入门
  • Java-IO流
  • Redis单线程详解
  • 多线程--单例模式and工厂模式