vue项目使用eletron将打包成桌面应用(.exe)

vue项目使用eletron将打包成桌面应用(.exe)

1.前期准备

两个项目:
1、自己用vue cli创建的项目
2、第二个是去gitee将案例clone下来
案例地址 https://gitee.com/qingplus/electron-quick-start.git

2、测试案例是否可以正常运行
# 进入项目
cd electron-quick-start
# 安装依赖库
npm install
# 运行应用
npm start

项目运行成功后效果如下

在这里插入图片描述

3、运行

在自己vue项目下的package.json 中的scripts下添加 如下代码

 "electron_dev": "npm run build && electron build/electron.js","electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --icon=./public/favicon.ico --overwrite"

添加后在这里插入图片描述
新加的两行是electron的启动 和打包命令
分别用了electron 和electron-packager安装这两个
在vue项目下安装以下依赖

npm install electron --save-dev
npm install electron-packager --save-dev

在使用electron_dev 命令前,需要将vue.config.js 中的publicPath: ‘/’ 修改为 ‘./’

// 默认部署在在服务器根路径,设为空字符串 ('') 或是相对路径 ('./')均表示所有的资源都会被链接为相对路径,这样打出来的包可以被部署在任意路径publicPath: "./",

在vue cli项目里创建一个文件夹名为 build,将electron-quick-start 中的main.js 复制到vue cli下面的build文件夹,并将main.js改名字为electron.js,修改electron.js内容

const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
function createWindow() {// 此处设置窗口大小const mainWindow = new BrowserWindow({width: 800,height: 600})// 此处设置入口页面mainWindow.loadURL(url.format({pathname: path.join(__dirname, '../dist/index.html'),protocol: 'file:',slashes: true}))// 此处设置关闭菜单栏mainWindow.setMenu(null)
}app.whenReady().then(() => {createWindow() app.on('activate', function() {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
}) 
app.on('window-all-closed', function() {if (process.platform !== 'darwin') app.quit()
})

然后执行命令

npm run electron_dev

就可以将自己的vue项目以桌面软件的形式运行
在这里插入图片描述

4、打包

首先使用以下命令将vue 项目打包成dist文件夹

npm run build

将electron.js移动到dist文件下,同时还有electron-quick-start中的package.json,目录结构如下

在这里插入图片描述
打包好的文件如下所示:
在这里插入图片描述

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

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

相关文章

kubernetes负载均衡资源-Ingress

一、Ingress概念 1.1 Ingress概念 使用NodePort类型的Service可以将集群内部服务暴露给集群外部客广端,但使用这种类型Service存在如下几个问题。 1、一个端口只能一个服务使用,所有通过NodePort暴露的端口都需要提前规划;2、如果通过NodePort暴露端口过多,后期维护成本太…

IPv6-重定向,PMTU,GRE隧道

IPv6-重定向,PMTU(路径最大传输单元),GRE隧道(Generic Routing Encapsulation,通用路由封装协议) 重定向过程 触发重定向的条件: 1、报文的入接口,等于自身路由之后的…

ubuntu2204配置zabbix6.4高可用

zabbix6.4-HA 配置keepalived配置haproxy数据库高可用配置zabbix-server配置proxy配置客户端agent 本实验VMware搭建zabbix6.4高可用集群,搭配haproxykeepalived。 master,node节点搭建haproxykeepalibed主备并配置vip地址 三台控制节点搭建数据库高可用…

Pytorch 下载失败原因

错误信息: ERROR: Could not find a version that satisfies the requirement torch (from versions: none) ERROR: No matching distribution found for torch 解决方案: 在官网看到,它需要python3.8-3.11的环境。过高和过低的版本都不…

微信小程序备案流程详细操作指南

自2023年9月1日起,所有新上架的微信小程序均需事先完成备案手续,方能成功上线。而对于已经上架的存量小程序,也需要在2024年3月31日前完成备案工作。若在规定时间内未完成备案,平台将依据备案相关规定,自2024年4月1日起…

金三银四面试题(八):JVM常见面试题(2)

今天我们继续探讨常见的JVM面试题。这些问题不比之前的问题庞大,多用于面试中​JVM部分的热身运动,开胃菜,但是大家已经要认真准备。 JRE、JDK、JVM 及JIT 之间有什么不同? JRE 代表Java 运行时(Java run-time&#…

ESP8266 控制 LED 亮灭

一、引脚对应 二、按键控制 LED 亮灭 2.1样例1 #include <ESP8266WiFi.h>const int ledPin D2; // LED 连接到 D2 引脚 const int keyPin D4; // 按键连接到 D4 引脚volatile bool flag false; // 记录 LED 状态的标志// 外部中断处理函数 ICACHE_RAM_ATTR void han…

(原型与原型链)前端八股文修炼Day5

一 原型链的理解 原型链定义&#xff1a; 原型链是 JavaScript 中实现对象继承的关键机制之一&#xff0c;它是一种对象之间的关系&#xff0c;通过这种关系&#xff0c;一个对象可以继承另一个对象的属性和方法。 原型链的组成&#xff1a; 每个对象都有一个指向另一个对象的…

C# 微软官方学习文档

链接&#xff1a;https://learn.microsoft.com/zh-cn/dotnet/csharp/ 在C#的学习过程中&#xff0c;我们可以参考微软官方的学习文档。它是一个免费的学习平台&#xff0c;提供了丰富的C#学习路径和教程&#xff08;如下图&#xff09;&#xff0c;对我们入门到高级应用开发都…

汇总:五个开源的Three.js项目

Three.js 是一个基于 WebGL 的 JavaScript 库&#xff0c;它提供了一套易于使用的 API 用来在浏览器中创建和显示 3D 图形。通过抽象和简化 WebGL 的复杂性&#xff0c;Three.js 使开发者无需深入了解 WebGL 的详细技术就能够轻松构建和渲染3D场景、模型、动画、粒子系统等。 T…

【自动装箱以及包装类的缓存】⭐️通过具体案例看下每种包装类的不同结果

目录 前言 一、自动装箱与拆箱&#xff08;以 Integer 包装类为例&#xff09; 二、再来看看几个示例 ​编辑三、Double ,Float 类型亦是如此吗&#xff1f; 前言 小伙伴们大家好&#xff0c;日常使用业务层方面的代码居多&#xff0c;但也不可忘了基本的一些代码格式以及原…

npm淘宝镜像源更新

目录 前情提要&#xff1a; 背景&#xff1a; 镜像源更新&#xff1a; 清楚缓存&#xff1a; 直接切换镜像源&#xff1a; 注&#xff1a;npm 补充&#xff1a; 错误解释&#xff1a; 解决方法&#xff1a; 前情提要&#xff1a; 2024 /1 /22 &#xff0c;registry.npm…

理解游戏服务器架构-逻辑底层架构

目录 前言 什么是逻辑底层架构 逻辑底层架构的职责 1&#xff09;Thread-线程 线程管理 线程通讯 线程安全锁机制 2&#xff09;Network-网络 网络模型 网络消息协议 断线重连 网络安全 防范重复消息 防范篡改消息内容 防范篡改内存数据 网络承载 3&#xff0…

HarmonyOS 应用开发之FA模型启动Stage模型UIAbility

本文介绍FA模型的三种应用组件如何启动Stage模型的UIAbility组件。 PageAbility启动UIAbility 在PageAbility中启动UIAbility和在PageAbility中启动PageAbility的方式完全相同。 import featureAbility from ohos.ability.featureAbility; import { BusinessError } from oh…

阿里云2核4G服务器租用价格,支持多少人在线?

阿里云2核4G服务器多少钱一年&#xff1f;2核4G配置1个月多少钱&#xff1f;2核4G服务器30元3个月、轻量应用服务器2核4G4M带宽165元一年、企业用户2核4G5M带宽199元一年。可以在阿里云CLUB中心查看 aliyun.club 当前最新2核4G服务器精准报价、优惠券和活动信息。 阿里云官方2…

YOLOv9改进策略 :主干优化 | ConvNeXtV2:适应自监督学习,让 CNN “再一次强大”?

💡💡💡本文改进内容:完全卷积掩码自编码器框架 ConvNeXt V2,它显著提高了纯convnet在各种识别基准上的性能,包括ImageNet分类,COCO目标检测和ADE20k分割。还提供了各种尺寸的预训练ConvNeXt v2模型,从而在ImageNet上具有76.7%精度的3.7M Atto model和88.9%精度的650…

理解游戏服务器架构-部署架构

目录 前言 我所理解的服务器架构 什么是否部署架构 部署架构的职责 进程业务职责 网络链接及通讯方式 与客户端的连接方式 服务器之间连接关系 数据落地以及一致性 数据库的选择 数据访问三级缓存 数据分片 读写分离 分布式数据处理 负载均衡 热更新 配置更新 …

Unity 基于Rigidbody2D模块的角色移动

制作好站立和移动的动画后 控制器设计 站立 移动 角色移动代码如下&#xff1a; using System.Collections; using System.Collections.Generic; using Unity.VisualScripting; using UnityEngine;public class p1_c : MonoBehaviour {// 获取动画组件private Animator …

zabbix主动发现,注册及分布式监控

主动发现 结果 主动注册 结果 分布式监控 服务机&#xff1a;132 代理机&#xff1a;133 客户端&#xff1a;135 代理机 数据库赋权&#xff1a; 代理机配置 网页上配置代理 客户端配置 网页上配置主机 重启代理机服务 网页效果

牛客周赛 Round 38(A,B,C,D,E,F,G)

比赛链接 官方讲解&#xff08;不分P不分段直接两小时怼上来是坏文明 &#xff09; 这场的题很棒&#xff0c;思维有难度&#xff0c;考察的知识点广泛&#xff0c;有深度&#xff0c;很透彻。感觉学到了很多。建议补题。 A 小红的正整数自增 思路&#xff1a; 签到。 可以…