vue项目打包成exe文件

1. 获取electron-quick-start demo

git clone https://github.com/electron/electron-quick-start

2. 安装依赖包

npm install 或 npm i
// 安装依赖时可能会遇到node版本的问题,需要切换node版本的可以先看下nvm,简单易操作

3. 打包项目(需要打包成exe的项目打包成dist)

将原项目进行打包: npm run build (具体命令需要根据项目package.json文件执行)
打包完直接将dist文件夹复制到electron-quick-start根路径

注意:一定要将node的npm安装镜像源设置成淘宝镜像,否则会遇到npm下载不成功的问题。

4. 配置electron-quick-start

  • 修改main.js文件
mainWindow.loadFile('index.html')   // 原文件
mainWindow.loadFile('./dist/index.html') // 指定dist内部的index.html文件

注意: 当前配置运行打包命令之后无法获取到index.html内引入的静态资源文件,需要手动修改index.html内引入的静态文件路径,设置为相对路径

  • 安装依赖electron-packager、electron
npm i electron-packager --save-dev   或  npm i electron-packager -D
npm i electron --save-dev    或    npm i electron -D // 安装不成功时可能是因为镜像源的问题
// 如果本地全局的镜像源已经是淘宝镜像,只需执行第二条命令
npm config set registry https://registry.npm.taobao.org/  
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
  • 修改package.json文件
"scripts": {"start": "electron .","packager": "electron-packager ./ Vite App --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"},<!-- Vite App:指定生成exe名称,可自定义icon: 指定应用图标路径,可选
-->
  1. 执行打包命令
npm run packager

原文链接

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

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

相关文章

[Linux] 性能分析

1. 中断 cat /proc/softirqs

基于YOLOv8模型和PCB电子线路板缺陷目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型PCB电子线路板缺陷目标检测系统可用于日常生活中检测与定位PCB线路板瑕疵&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检…

算法leetcode|72. 编辑距离(rust重拳出击)

文章目录 72. 编辑距离&#xff1a;样例 1&#xff1a;样例 2&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;二维数组&#xff08;易懂&#xff09;滚动数组&#xff08;更加优化的内存空间&#xff09; go&#xff1a;c&#xff1a;python&a…

Java Word转PDF(直接转和以图片形式转)、PDF转图片、图片转PDF

在淘宝上找了一家写代码的店铺写了一个工具类&#xff0c;再参考网上的代码&#xff0c;改了改 用到的类库&#xff1a; <!-- https://mvnrepository.com/artifact/org.apache.pdfbox/fontbox --><!--word转pdf--><dependency><groupId>com.documents4…

Qt中如何在qml文件中使用其他的qml文件并创建对象

如果想使用其他的qml文件直接创建对象&#xff0c;必须先这样导入其qml文件并as成别名&#xff0c;才可以创建对象并使用它。 一、导入qml文件&#xff0c;例如&#xff1a; import "CameraConfig.qml" as CameraConfig import "CameraDevelopView.qml" a…

内网穿透实战应用-windows搭建WebDAV服务,并内网穿透公网访问【无公网IP】

windows搭建WebDAV服务&#xff0c;并内网穿透公网访问【无公网IP】 文章目录 windows搭建WebDAV服务&#xff0c;并内网穿透公网访问【无公网IP】1. 安装IIS必要WebDav组件2. 客户端测试3. cpolar内网穿透3.1 打开Web-UI管理界面3.2 创建隧道3.3 查看在线隧道列表3.4 浏览器访…

设计模式之代理模式(Proxy)的C++实现

1、代理模式的提出 在组件的开发过程中&#xff0c;有些对象由于某种原因&#xff08;比如对象创建的开销很大&#xff0c;或者对象的一些操作需要做安全控制&#xff0c;或者需要进程外的访问等&#xff09;&#xff0c;会使Client使用者在操作这类对象时可能会存在问题&…

聊聊TaskExecutorMetricsAutoConfiguration

序 springboot2.6.0版本提供了TaskExecutorMetricsAutoConfiguration&#xff0c;可以自动给线程池加上metrics TaskExecutorMetricsAutoConfiguration spring-boot-actuator-autoconfigure-2.7.14-sources.jar!/org/springframework/boot/actuate/autoconfigure/metrics/ta…

Vue2到3 Day7 全套学习内容,众多案例上手(内付源码)

简介&#xff1a; Vue2到3 Day1-3 全套学习内容&#xff0c;众多案例上手&#xff08;内付源码&#xff09;_星辰大海1412的博客-CSDN博客本文是一篇入门级的Vue.js介绍文章&#xff0c;旨在帮助读者了解Vue.js框架的基本概念和核心功能。Vue.js是一款流行的JavaScript前端框架…

微信小程序教学系列(1)

第一章&#xff1a;入门指南 第一节&#xff1a;了解微信小程序 微信小程序是一种基于微信平台的应用程序&#xff0c;它可以在微信中直接打开和使用&#xff0c;而无需下载安装。以下是关于微信小程序的一些基本信息&#xff1a; 1. 什么是微信小程序&#xff1f; 微信小程…

java之webservice_aegis.xml学习

开门见山,直奔主题,让我们先来看一个接口: public interface UserInfo {public Collection findRoleInfosByUserID(String userUniqueID);public User findUserInfosByUserID(String userUniqueID);public String test();} 观察此接口,首先我们看findRoleInfosByUserID方法…

【Java 动态数据统计图】动态数据统计思路案例(动态,排序,数组)一(112)

需求&#xff1a;&#xff1a; 有一个List<Map<String.Object>>,存储了某年某月的数据&#xff0c; 数据是根据用户查询条件进行显示的&#xff1b;所以查询的数据是动态的&#xff1b;需按月份统计每个年月数据出现的次数&#xff0c;并且按照月份排序&#xff1…

c#设计模式-结构型模式 之 代理模式

前言 由于某些原因需要给某对象提供一个代理以控制对该对象的访问。这时&#xff0c;访问对象不适合或者不能直接 引用目标对象&#xff0c;代理对象作为访问对象和目标对象之间的中介。在学习代理模式的时候&#xff0c;可以去了解一下Aop切面编程AOP切面编程_aop编程…

项目实战 — 博客系统③ {功能实现}

目录 一、编写注册功能 &#x1f345; 1、使用ajax构造请求&#xff08;前端&#xff09; &#x1f345; 2、统一处理 &#x1f384; 统一对象处理 &#x1f384; 保底统一返回处理 &#x1f384; 统一异常处理 &#x1f345; 3、处理请求 二、编写登录功能 &#x1f345; …

[国产MCU]-W801开发实例-GPIO输出与LED点亮

GPIO输出与LED点亮 文章目录 GPIO输出与LED点亮1、GPIO介绍2、GPIO驱动API介绍3、点亮LED1、GPIO介绍 在W801中,GPIO模块分为两组,GPOIA和GPIOB。GPIO的功能通过对GPIO控制器配置属性来实现。GPIO控制器允许用户对每个GPIO进行单独配置,包括配置为输入或输出;状态配置为悬…

vue引入 import { decode } from ‘js-base64‘

vue引入 import { decode } from ‘js-base64’ package.json 里面加上 需要用的地方 加上 import { decode } from ‘js-base64’ let params decode(loook)最后 npm install

sh 脚本循环语句和正则表达式

目录 1、循环语句 1、for 2、while 3、until 2、正则表达式 1、元字符 2、表示次数 3、位置锚定 4、分组 5、扩展正则表达式 1、循环语句 循环含义 将某代码段重复运行多次&#xff0c;通常有进入循环的条件和退出循环的条件 重复运行次数 循环次数事先已知 循环次…

爱荷华州的一个学区正在使用ChatGPT来决定禁止哪些书籍

为了响应爱荷华州最近颁布的立法&#xff0c;管理员们正在从梅森市学校图书馆移除禁书&#xff0c;官员们正在使用ChatGPT帮助他们挑选书籍&#xff0c;根据公报和大众科学. 由州长金雷诺兹签署的禁令背后的新法律是教育改革浪潮的一部分&#xff0c;共和党立法者认为这是保护…

OLED透明屏案例:揭示技术创新的无限可能性

OLED透明屏作为一项创新性技术&#xff0c;在各个领域展现出了令人惊叹的应用潜力。 那么&#xff0c;尼伽便通过介绍一些具体的OLED透明屏案例&#xff0c;探索其在智能家居、汽车行业、商业展示、航空航天、教育与培训以及医疗健康等领域的成功应用。 这些案例将展示OLED透明…

下线40万辆,欧拉汽车推出2023款好猫尊荣型和GT木兰版

欧拉汽车是中国新能源汽车制造商&#xff0c;成立于2018年。截至目前&#xff0c;已经下线了40万辆整车&#xff0c;可见其在市场的影响力和生产实力。为了庆祝这一里程碑&#xff0c;欧拉汽车推出了品牌书《欧拉将爱进行到底》&#xff0c;在其中讲述了欧拉汽车的发展历程和未…