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

Vue3 + Vite Web项目 Electron 打包桌面应用程序

在根目录下创建  electron  文件夹

创建 electron/main.js 文件:

// 导入模块
const { app, BrowserWindow ,Menu } = require('electron')
const path = require('path')// 创建主窗口
const createWindow = () => {const mainWindow = new BrowserWindow({width: 1440,height: 800,webPreferences: {preload: path.join(__dirname, 'preload.js'),nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的APIcontextIsolation: false, // 可以使用require方法enableRemoteModule: true, // 可以使用remote方法}})// 和自己本地vue项目启动的地址保持一致//mainWindow.loadURL(`http://localhost:5173`)  //本地调试用这个mainWindow.loadURL(`https://ai.taxplus101.com`)
}
Menu.setApplicationMenu(null)
// 应用准备就绪,加载窗口
app.whenReady().then(() => {createWindow()// mac 上默认保留一个窗口app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})// 关闭所有窗口 : 程序退出 : windows & linux
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

创建 electron/preload.js 文件:

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与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])}
})

修改 pakeage.json 文件:

添加以下内容:

"main":"electron/main.js"
"electron":"electron ."

 如果有: "type": "module"   一定要删除!!!!

否则会报错:

 如果运行本地调试,需要先启动本地的 web调试  再启动本地 electron调试

打包相关:

一、安装 electron-builder

npm i electron-builder -D

二、修改package.json文件

添加以下内容:

"electron:build": "electron-builder","build": {"appId": "com.demo.myApp",  //包id 格式:com.xxx.项目名"productName": "myApp", // 项目名"copyright": "Copyright © 2024 <your-name>", // 版权信息"mac": {"category": "public.app-category.utilities"},"nsis": {"oneClick": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": true // 卸载应用清除用户缓存},"files": ["dist/**/*","electron/**/*"],"directories": {"buildResources": "assets", //静态文件资源获取目录"output": "dist_electron" // 打包位置,会新建到项目根目录}},

三、运行打包命令

如运行遇到无法创建地址错误,请使用管理员终端再次运行 

npm run electron:build

打包结果:

参考文章:将web项目打包成electron桌面端教程(二)vue3+vite+ts-CSDN博客 

相关文章:

Vue3 + Vite Web项目 Electron 打包桌面应用程序

在根目录下创建 electron 文件夹 创建 electron/main.js 文件&#xff1a; // 导入模块 const { app, BrowserWindow ,Menu } require(electron) const path require(path)// 创建主窗口 const createWindow () > {const mainWindow new BrowserWindow({width: 1440…...

Linux:login shell和non-login shell以及其配置文件

相关阅读 Linuxhttps://blog.csdn.net/weixin_45791458/category_12234591.html?spm1001.2014.3001.5482 shell是Linux与外界交互的程序&#xff0c;登录shell有两种方式&#xff0c;login shell与non-login shell&#xff0c;它们的区别是读取的配置文件不同&#xff0c;本…...

面试速通宝典——1

1. 内存有哪几种类型&#xff1f; ‌‌‌‌  内存分为五个区&#xff0c;堆&#xff08;malloc&#xff09;、栈&#xff08;如局部变量、函数参数&#xff09;、程序代码区&#xff08;存放二进制代码&#xff09;、全局/静态存储区&#xff08;全局变量、static变量&#…...

用uniapp 及socket.io做一个简单聊天 升级 9

比这之前优化了以下功能 上线通知 群聊里适时显示在线人数 约请好友 通过好友通过socket 相应端自动变化 PC端可以拉取摄象头拍照 PC端可以录音发送 拉起摄象头发送录象 <template><view class""><scroll-view scroll-y"true" class&…...

【Unity Shader】Special Effects(九)Vortex 旋涡(UI)

源码:[点我获取源码] 索引 Vortex 旋涡思路分析旋涡中心旋涡旋转旋涡强度旋涡动画Vortex 旋涡 旋涡效果可以将一张图像以指定点作为旋涡中心,呈顺时针旋涡动画效果,使用动画播放器: 思路分析 首先,旋涡特效的核心也即是旋转(特别是uv坐标的旋转); 在此基础上,旋涡中…...

01_两数之和

一、题目 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标值 target 的那 两个 整数&#xff0c;并返回它们的数组下标。 你可以假设每种输入只会对应一个答案&#xff0c;并且你不能使用两次相同的元素。 你可以按任意顺序返回答案。…...

ChatGLM-6B-部署与使用

✨ Blog’s 主页: 白乐天_ξ( ✿&#xff1e;◡❛) &#x1f308; 个人Motto&#xff1a;他强任他强&#xff0c;清风拂山冈&#xff01; &#x1f4ab; 欢迎来到我的学习笔记&#xff01; 什么是ChatGLM-6B 一、简介 ChatGLM-6B 是由清华大学知识工程实验室&#xff08;KEG&…...

李宏毅结构化学习 03

文章目录 一、Sequence Labeling 问题概述二、Hidden Markov Model(HMM)三、Conditional Random Field(CRF)四、Structured Perceptron/SVM五、Towards Deep Learning 一、Sequence Labeling 问题概述 二、Hidden Markov Model(HMM) 上图 training data 中的黑色字为x&#xff…...

java重点学习-总结

十五 总结 https://kdocs.cn/l/crbMWc8xEZda &#xff08;总结全部的精华&#xff09; 1.面试准备 企业筛选简历规则简历编写注意事项(亮点)项目怎么找&#xff0c;学习到什么程度面试过程(表达结构、什么样的心态去找工作) 2.redis 缓存相关(缓存击穿、穿透、雪崩、缓存过期淘…...

文件操作

文件的由来&#xff1a;在程序中&#xff0c;之前每一个程序都是需要运行然后输入数据&#xff0c;当程序结束时输入的数据也随之消散&#xff0c;为了下一次运行时不再输入数据就有文件的由来&#xff0c;使用文件我们可以将数据直接存放在电脑的硬盘上&#xff0c;做到了数据…...

docker存储

docker分层结构 如图所示&#xff0c;容器是由最上面可读可写的容器层&#xff0c;以及若干个只读镜像层组成&#xff0c;创建容器时&#xff0c;容器中的 数据都来自镜像层。这样的分层机构最大的特点是写时复制&#xff1a; 1、容器中新生成的数据会直接存放在容器层&#xf…...

Ubuntu20.04.6 环境下docker设置proxy

问题背景&#xff1a; 在进行dokcer pull操作的时候&#xff0c;会失败且出现如下提示Error response from daemon: Get "https://registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting h…...

如何给文件夹里面的文件批量添加前缀和编号(利用C#写的小工具)

运行结果 将上面的文件编号效果 下载过后启动这个程序即可&#xff08;这个程序灵感来源是上次给美术资源分类和编号的时候给我干吐了&#xff0c;所以写了这个工具&#xff09; 体验链接&#xff1a;laozhupeiqia/批处理 --- laozhupeiqia/批处理 (github.com) 如果对你有帮助…...

使用分布式调度框架时需要考虑的问题——详解

引言 随着企业系统的规模不断扩大&#xff0c;特别是在分布式计算和云计算环境下&#xff0c;如何协调多个节点或服务执行任务成为一个关键问题。分布式调度框架在这种背景下应运而生&#xff0c;它可以调度成千上万的任务&#xff0c;在多个节点上分配、执行和监控任务&#…...

C语言编译四大阶段

目录 一、引言 二、预处理阶段 三、编译阶段 四、汇编阶段 五、链接阶段 六、总结 本文将详细介绍C语言编译的四个阶段&#xff0c;包括预处理、编译、汇编和链接。通过学习这些阶段&#xff0c;读者可以更好地理解C语言程序的编译过程&#xff0c;提高编程效率。 一、引…...

C# 关于“您与该网站的连接不是私密连接...”的问题

目录 问题现象 范例运行环境 WebService 类 类介绍 增加参数 实现 小结 问题现象 最近在访问开发的微信支付功能时遇到了无法访问令牌的错误&#xff0c;这个错误是公司内部应用程序接口返回的访问错误。经过排查是访问 HTTPS 站点遇到的错误&#xff0c;提示证书风险…...

【超详细】基于YOLOv8训练无人机视角Visdrone2019数据集

主要内容如下&#xff1a; 1、Visdrone2019数据集介绍 2、下载、制作YOLO格式训练集 3、模型训练及预测 4、Onnxruntime推理 运行环境&#xff1a;Python3.8&#xff08;要求>3.8&#xff09;&#xff0c;torch1.12.0cu113&#xff08;要求>1.8&#xff09;&#xff0c…...

VUE项目在Linux子系统部署

1、导读 环境&#xff1a;Windows 11、python 3.12.3、Django 4.2.11、 APScheduler 3.10.4 vue 背景&#xff1a;换系统需要重新安装&#xff0c;避免后期忘记&#xff0c;此处记录一下啊 事件&#xff1a;20240922 说明&#xff1a;使用node启动&#xff0c;非nginx&…...

开源 | 如何在产品上扩展大储存?合宙LuatOS外挂SPI Flash库轻松搞定

我们都知道芯片的储存都是寸土寸金的&#xff0c;当你的产品需要存储照片、音频、文档等资源的时候&#xff0c;有没有眉头一紧&#xff1f;内部不够只能外扩&#xff0c;但是外扩要编写各种驱动&#xff0c;还有Flash替换&#xff0c;这都要消耗头发啊&#xff01; 但&#x…...

20 基于STM32的温度、电流、电压检测proteus仿真系统(OLED、DHT11、继电器、电机)

目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于STM32F103C8T6 采用DHT11读取温度、滑动变阻器模拟读取电流、电压。 通过OLED屏幕显示&#xff0c;设置电流阈值为80&#xff0c;电流小阈值为50&#xff0c;电压阈值为60&#xff0c;温度阈值…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

高危文件识别的常用算法:原理、应用与企业场景

高危文件识别的常用算法&#xff1a;原理、应用与企业场景 高危文件识别旨在检测可能导致安全威胁的文件&#xff0c;如包含恶意代码、敏感数据或欺诈内容的文档&#xff0c;在企业协同办公环境中&#xff08;如Teams、Google Workspace&#xff09;尤为重要。结合大模型技术&…...

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

初学 pytest 记录

安装 pip install pytest用例可以是函数也可以是类中的方法 def test_func():print()class TestAdd: # def __init__(self): 在 pytest 中不可以使用__init__方法 # self.cc 12345 pytest.mark.api def test_str(self):res add(1, 2)assert res 12def test_int(self):r…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

掌握 HTTP 请求:理解 cURL GET 语法

cURL 是一个强大的命令行工具&#xff0c;用于发送 HTTP 请求和与 Web 服务器交互。在 Web 开发和测试中&#xff0c;cURL 经常用于发送 GET 请求来获取服务器资源。本文将详细介绍 cURL GET 请求的语法和使用方法。 一、cURL 基本概念 cURL 是 "Client URL" 的缩写…...

Qt 事件处理中 return 的深入解析

Qt 事件处理中 return 的深入解析 在 Qt 事件处理中&#xff0c;return 语句的使用是另一个关键概念&#xff0c;它与 event->accept()/event->ignore() 密切相关但作用不同。让我们详细分析一下它们之间的关系和工作原理。 核心区别&#xff1a;不同层级的事件处理 方…...

Spring Boot + MyBatis 集成支付宝支付流程

Spring Boot MyBatis 集成支付宝支付流程 核心流程 商户系统生成订单调用支付宝创建预支付订单用户跳转支付宝完成支付支付宝异步通知支付结果商户处理支付结果更新订单状态支付宝同步跳转回商户页面 代码实现示例&#xff08;电脑网站支付&#xff09; 1. 添加依赖 <!…...