vue3+ts+vite+electron+electron-packager打包成exe文件

目录

1、创建vite项目

2、添加需求文件

3、根据package.json文件安装依赖

4、打包

5、electron命令运行

6、electron-packager打包成exe文件


 Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

1、创建vite项目

npm create vite@latest

2、添加需求文件

根目录下新建main.js

// main.js// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node: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('./dist/index.html')// 打开开发工具// mainWindow.webContents.openDevTools()
}// 这段程序将会在 Electron 结束初始化
// 和创建浏览器窗口的时候调用
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(() => {createWindow()app.on('activate', () => {// 在 macOS 系统内, 如果没有已开启的应用窗口// 点击托盘图标时通常会重新创建一个新窗口if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此, 通常
// 对应用程序和它们的菜单栏来说应该时刻保持激活状态, 
// 直到用户使用 Cmd + Q 明确退出
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})// 在当前文件中你可以引入所有的主进程代码
// 也可以拆分成几个文件,然后用 require 导入。

根目录下新建preload.js文件 

// preload.js// 所有的 Node.js API接口 都可以在 preload 进程中被调用.
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {const replaceText = (selector, text) => {const element = document.getElementById(selector)if (element) element.innerText = text}for (const dependency of ['chrome', 'node', 'electron']) {replaceText(`${dependency}-version`, process.versions[dependency])}
})

 vite.config.js中配置修改

// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import path from "path";export default defineConfig({base: "./", // 设置公共路径为相对路径,plugins: [vue()],resolve: {alias: {"@": path.resolve(__dirname, "src"),},},
});
//不设置路径,页面空白,提示找不到资源

 直接在package.json中添加缺少数据,或者根据缺失依赖逐个添加

//package.json
{"name": "my-electron-app","version": "1.0.0","description": "Hello World!","main": "main.js","author": "Jane Doe","license": "MIT","scripts": {"dev": "vite","start": "electron .","build": "vite build","preview": "vite preview","electron:serve": "vite build & electron . ","packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"},"dependencies": {"vue": "^3.4.29"},"devDependencies": {"@vitejs/plugin-vue": "^5.0.5","electron": "^31.2.0","electron-packager": "^17.1.2","typescript": "^5.2.2","vite": "^5.3.1","vue-tsc": "^2.0.21"}
}
3、根据package.json文件安装依赖

yarn 

4、打包

yarn build

5、electron命令运行

yarn start

6、electron-packager打包成exe文件

 yarn packager

 

 在文件夹中双击打开

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/385997.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【解决方案】华普微汽车智能钥匙解决方案

一、方案概述 1.什么是被动式无钥匙进入 "被动式无钥匙进入"(Passive Keyless Entry)是一种用于车辆、建筑物或其他设施的访问控制系统。它利用无线射频技术自动判断用户是否接近,并进行身份识别以执行开锁或落锁动作&#xff0c…

LabVIEW操作系列1

系列文章目录 我的记录: LabVIEW操作系列 文章目录 系列文章目录前言五、特殊用法5.1 取值范围表示5.2 对输入值取值范围进行限定5.3 控制多个While循环停止运行。5.4 获取按钮上的文本5.5 获取按钮上的文本【进阶】 六、使用步骤1.引入库2.读入数据 七、其余功能7.…

nodejs与npm版本对应表

Node.js — Node.js 版本 (nodejs.org)

go语言day20 使用gin框架获取参数 使用自定义的logger记录日志

Golang 操作 Logger、Zap Logger 日志_golang zap-CSDN博客 目录 一、 从控制器中获取参数的几种形式 1) 页面请求url直接拼接参数。 2) 页面请求提交form表单 3) 页面请求发送json数据,使用上下文对象c的BindJSON()方法接…

Java中static静态变量--继承等相关知识

目录 static 继承: 继承的特点: 案例:自己设计一个继承体系练习: 设计思想: 代码: 子类到底能继承父类的哪些类容? 成员变量内存的继承情况: 成员方法的内存继承情况&#x…

示例:WPF中如何处理TabControl页面绑定ItemsSource切换TabItem时UI数据没有持久保存的问题

一、目的:在WPF开发过程中,经常用到TabControl,也会遇到类似问题,用TabControl绑定数据源ItemsSource时,切换TabItem时,UI上的数据没有持久保存,本文介绍一种处理方式,可以做到缓存页…

矩阵管理系统有哪些功能?

在当今快节奏的数字时代,管理多个社交媒体账号或内容渠道可能是一项令人望而生畏的任务。这就是矩阵管理系统大显身手的地方。矩阵管理系统是一种高效的工具,它帮助我们轻松地管理多个内容发布点,就像指挥官控制着整个战场一样。下面&#xf…

C++·set与map容器(下)

本节把红黑树封装到set与map容器中去主要就是迭代器的自增自减,封装的大部分内容都展示到最后代码中了 1. 红黑树的改造 因为set容器只有关键码值,map容器中不仅要存关键码值,还要存关键码值对应的数据。但是红黑树只有一颗,我们…

【轨物方案】码头卸船机在线监测物联网解决方案

卸船机是利用连续输送机械制成能提升散粒物料的机头,或兼有自行取料能力,或配以取料、喂料装置,将散粒物料连续不断地提出船舱,然后卸载到臂架或机架并能运至岸边运输的地方送机系统去的专用机械。每年都要安排人员定期去现场巡检…

搭建DNS正向解析,反向解析+搭建DNS主从架构+搭建DNS多区域+时间同步

主要在局域网中配置,不存在外网 正向解析:域名解析为IP named.conf 解决权限 named.rfc1912.zones 解决解析方式 环境准备:三台机器都做下面的操作 基础配置:网络配置,关闭安全架构,关闭防火墙&#x…

3D模型可视化引擎HOOPS Luminate功能一览:实时渲染(二)

HOOPS Luminate是一款专为图像可视化设计的C编程工具包。它通过一个统一的集成API,全面覆盖了实时2D、实时3D以及照片级逼真渲染的图形功能。在处理大型数据组件的显示方面,HOOPS Luminate展现出了卓越的性能,并且具备高度的可定制性和灵活性…

一文带你读懂TCP

文章目录 1 TCP协议1.1 TCP 基础1.1.1 TCP 特性1.2.2 TCP连接数 1.2 TCP 头1.2.1 TCP 头格式1.2.2 MTU,MSS,分片传输 1.3 TCP 连接三路握手1.4 TCP 断开四次挥手1.5 SYN攻击和防范1.6 重传机制1.6.1 超时重传1.6.2 快速重传1.6.3 SACK 1.7 滑动窗口1.8 流…

VScode使用Github Copilot插件时出现read ECONNREST问题的解决方法

文章目录 read ECONNREST查看是否仍是 Copilot 会员查看控制台输出网络连接问题浏览器设置问题笔者的话 read ECONNREST 最近使用 Copilot 时一直出现 read ECONNREST 问题,这个表示连接被对方重置了,就是说在读取数据时连接被关闭。 我首先怀疑是不是…

springboo 整合 redis

springBoot 整合 redis starter启动依赖。—包含自动装配类—完成相应的装配功能。 引入依赖 <!--引入了redis整合springboot 的依赖--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis&…

PostgreSQL的pg-collector工具

PostgreSQL的pg-collector工具 pg-collector 是一个用于 PostgreSQL 数据库的监控和数据收集工具。它主要用于收集 PostgreSQL 实例的性能指标、查询统计和日志信息&#xff0c;以便进行数据库性能分析和故障排查。通过收集这些数据&#xff0c;管理员可以更好地了解数据库的运…

盘点2024年网上很火的4个语音识别转文字工具。

语音识别转文字是一项非常实用的技术&#xff0c;可以帮助我们在会议记录中省去手动记录&#xff0c;在采访中迅速得到文字稿&#xff0c;在学习中快速生成课堂笔...运用十分广泛。但是很多人不知道要怎么转换&#xff0c;在这里我便给大家介绍几款效率非常高的语音转文字的工具…

python 裁剪图片

情况&#xff1a; 有时候看视频&#xff0c;看到一个漂亮的妹子&#xff0c;按下 Alt PrintScreen 进行截图之后&#xff0c;会把整个屏幕都截图。 需要适当剪裁一下。 每次打开 PS &#xff0c; 也太慢了。 所以写个代码&#xff0c; 快速处理。 效果对比&#xff1a; 原始…

轨道式智能巡检机器人,助力综合管廊安全运维

1 引言 当前城市综合管廊建设已经成为世界范围内的发展趋势&#xff0c;2017年5月住建部、发改委联合发布《全国城市市政基础设施建设“十三五”规划》&#xff0c;截至2017年4月底国内地下综合管廊试点项目已开工建设687 km&#xff0c;建成廊体260 km&#xff0c;完成投资40…

MSSQL注入前置知识

简述 Microsoft SQL server也叫SQL server / MSSQL&#xff0c;由微软推出的关系型数据库&#xff0c;默认端口1433 常见搭配C# / .net IISmssql mssql的数据库文件 数据文件&#xff08;.mdf&#xff09;&#xff1a;主要的数据文件&#xff0c;包含数据表中的数据和对象信息…

使用update-alternatives管理GCC版本

使用update-alternatives管理GCC版本 简介操作过程 简介 当操作系统中存在多个版本的GCC时&#xff0c;可以使用使用update-alternatives管理默认使用的编译器版本。 本文使用gcc-9和gcc-11做演示&#xff0c;操作系统为ubuntu-20.04 操作过程 ①使用以下命令确认gcc已正确…