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.mzph.cn/news/875873.shtml

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

相关文章

【C++】深度解析:用 C++ 模拟实现 list 类,探索其底层实现细节

目录 list介绍 list模拟实现 list 节点类 list 的迭代器 定义 构造函数 解引用 operator前置和--与后置和-- operator与operator! list 类 构造函数 begin()和end() 拷贝构造 erase() clear() 析构函数 insert push_back 和 push_front pop_back 和 pop_front…

Linux网络协议深度解析:从IP到TCP/IP堆栈

Linux网络协议深度解析是一个复杂而详细的主题,它涵盖了从基本的数据包传输到复杂的协议交互。以下是对"Linux网络协议深度解析:从IP到TCP/IP堆栈"这一主题的简要解析: IP协议(Internet Protocol) •作用:…

Leetcode—769. 最多能完成排序的块【中等】

2024每日刷题&#xff08;149&#xff09; Leetcode—769. 最多能完成排序的块 实现代码 class Solution { public:int maxChunksToSorted(vector<int>& arr) {int ans 0;int mx INT_MIN;for(int i 0; i < arr.size(); i) {mx max(arr[i], mx);if(mx i) {a…

力扣高频SQL 50题(基础版)第六题

文章目录 1378. 使用唯一标识码替换员工ID题目说明思路分析实现过程结果截图总结 1378. 使用唯一标识码替换员工ID 题目说明 Employees 表&#xff1a; ---------------------- | Column Name | Type | ---------------------- | id | int | | name | varchar | ------…

登顶官方热榜,“超级智能体创造营”一期获奖名单公开!

自超级智能体创造营活动7月11日上线以来&#xff0c;受到很多平台开发者的关注&#xff0c;很开心看到首期创造营聚集了诸多优秀的平台开发者&#xff0c;共同参与到主题创作中&#xff0c;提交了100 的创意智能体&#xff01; 经过官方伙伴历经多轮、多维度的专业评审&#x…

yarn安装electron时报错RequestError:socket hang up

安装electron时候&#xff0c;出现RequestError:socket hang up这样的错误&#xff0c;找了半天很多方式都是用旧淘宝源&#xff0c;导致根本安装不上去。 在项目的根目录下创建.npmrc文件&#xff0c;添加以下内容 # registryhttps://mirrors.huaweicloud.com/repository/np…

乐尚代驾八订单执行三

司机到达代驾终点&#xff0c;代驾结束了。结束代驾之后&#xff0c; – 获取额外费用&#xff08;高速费、停车费等&#xff09; – 计算订单实际里程&#xff08;实际与预估有偏差&#xff09; – 计算代驾实际费用 – 系统奖励 – 分账信息 – 生成最终账单 计算订单…

Meta发布Llama 3.1 405B模型:开源与闭源模型之争的新篇章

引言 在人工智能领域&#xff0c;开源与闭源模型之争一直是热点话题。近日&#xff0c;Meta发布了最新的Llama 3.1 405B模型&#xff0c;以其强大的性能和庞大的参数规模&#xff0c;成为了开源模型中的佼佼者。本文将详细介绍Llama 3.1 405B模型的性能、功能及其在开源领域的…

Java码农人生使用手册——数组

一、基本概念 数组可以看成是相同类型元素的一个集合。 1、数组的创建及初始化 注意&#xff1a; 静态初始化虽然没有指定数组的长度&#xff0c;但是编译器在编译时会根据{}内的元素个数来确定数组的长度。静态初始化时&#xff0c;{}中的数据必须与[]前的数据类型一致。静态…

DDoS 攻击下的教育网站防护策略

随着互联网的普及&#xff0c;教育网站成为学生和教师获取信息、进行在线学习的重要平台。然而&#xff0c;这些网站也成为了网络攻击的目标&#xff0c;尤其是分布式拒绝服务&#xff08;DDoS&#xff09;攻击。本文将探讨DDoS攻击对教育网站的影响&#xff0c;并提出一系列有…

{Spring Boot 原理篇} Spring Boot自动装配原理

SpringBootApplication 1&#xff0c;Spring Boot 应用启动&#xff0c;SpringBootApplication标注的类就是启动类&#xff0c;它去实现配置类中的Bean的自动装配 SpringBootApplication public class SpringbootRedis01Application {public static void main(String[] args)…

DL/T645、IEC104转BACnet网关实现实时数据采集

BA102网关是钡铼技术专为实现电力协议DL/T645、IEC104与楼宇自控协议BACnet相互转化而研发的。它下行采集支持Modbus RTU、Modbus TCP、DL/T645、IEC104等协议&#xff0c;上行转发则支持BACnet IP和BACnet MS/TP协议&#xff0c;从而实现了电力协议与楼宇自控协议之间的相互转…

切换数据失败0x1671分析

1、问题背景 切换双卡数据开关&#xff0c;无法切换成功&#xff0c;且单机必现该问题 2、问题分析 搜索Log发现相关拨号无法建立成功&#xff0c;返回0x1671&#xff0c;无法建立PDN连接。 相关拨号上层未下发相关AT命令&#xff0c;属于上层报错&#xff0c;并非网络问题&…

AI有关的学习和python

一、基本概念 AIGC&#xff08;AI Generated content AI 生成内容&#xff09; AI生成的文本、代码、图片、音频、视频。都可以成为AIGC。 Generative AI&#xff08;生成式AI&#xff09;所生成的内容就是AIGC AI指代计算机人工智能&#xff0c;模仿人类的智能从而解决问题…

解读:基于图的大模型提示技术

【引子】大模型的兴起&#xff0c; 使得读论文成为了学习中的一种常态。如果一篇论文没有读懂&#xff0c;不用担心&#xff0c;可以再读一篇该领域内容相近的论文&#xff0c;量变可能会产生质变。就像编程语言一样&#xff0c;你永远无法精通一门编程语言&#xff0c;除非&am…

为什么idea建议使用“+”拼接字符串

今天在敲代码的时候&#xff0c;无意间看到这样一个提示&#xff1a; 英文不太好&#xff0c;先问问ChatGPT&#xff0c;这个啥意思&#xff1f; IDEA 提示你&#xff0c;可以将代码中的 StringBuilder 替换为简单的字符串连接方式。 提示信息中说明了使用 StringBuilder 进行…

独孤思维:长线副业,越做越香

01 独孤从开始做第一个短视频开始&#xff0c;就做好了长线作战的准备。 IP的短视频&#xff0c;尤其是如今这么卷的情况下&#xff0c;独孤并不期望短时间内涨粉&#xff0c;甚至变现。 还是站在长期主义角度上&#xff0c;去看到短视频。 就如同&#xff0c;独孤做日更写…

nodejs的mysql事务,行锁,表锁

使用事务&#xff08;Transactions&#xff09;&#xff1a; 在 MySQL 中&#xff0c;事务&#xff08;Transaction&#xff09;可以确保一组操作要么全部成功&#xff0c;要么全部失败和回滚&#xff0c;从而保持数据的一致性。使用 connection.beginTransaction() 开始事务&a…

Android APP 音视频(01)MediaCodec解码H264码流

说明&#xff1a; 此MediaCodec解码H264实操主要针对Android12.0系统。通过读取sd卡上的H264码流Me获取视频数据&#xff0c;将数据通过mediacodec解码输出到surfaceview上。 1 H264码流和MediaCodec解码简介 1.1 H264码流简介 H.264&#xff0c;也被称为MPEG-4 AVC&#xff…

SCADA系统智能化管理工厂 操作方便易于使用

SCADA系统是将工厂进行智能化升级的专业系统&#xff0c;可根据需求与预算定制&#xff0c;从多设备的采集、数据的显示、数据可视化展示、分析图像、边缘计算、协议解析、数据转发、数据清洗、数据转换、数据存储、数据传输等等&#xff0c;各种功能均可根据实际需求进行定制&…