relectron框架——打包前端vue3、react为pc端exe可执行程序

文章目录

    • ⭐前言
    • ⭐搭建Electron打包环境
      • 💖 npm镜像调整
      • 💖 初始化项目
      • 💖 配置index.js
    • ⭐打包vue3
    • ⭐打包react
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好,我是yma16,本文分享关于使用electronjs打包前端vue3、react成exe可执行程序。。
vue3系列相关文章:
前端vue2、vue3去掉url路由“ # ”号——nginx配置
csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板
认识vite_vue3 初始化项目到打包
python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示
vue3 + fastapi 实现选择目录所有文件自定义上传到服务器
Electron前端框架
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
electron文档

⭐搭建Electron打包环境

安装预编译的 Electron 二进制文件

💖 npm镜像调整

切换镜像地址

ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

npm安装

$ sudo npm install electron --unsafe-perm=true

💖 初始化项目

npm初始化配置

$ npm init

package.json

{"name": "coco-cat","version": "1.0.0","description": "tools","main": "index.js","scripts": {"start": "electron-forge start","package": "electron-forge package","make": "electron-forge make"},"author": "yma16","license": "MIT","devDependencies": {"@electron-forge/cli": "^6.4.2","@electron-forge/maker-deb": "^6.4.2","@electron-forge/maker-rpm": "^6.4.2","@electron-forge/maker-squirrel": "^6.4.2","@electron-forge/maker-zip": "^6.4.2","@electron-forge/plugin-auto-unpack-natives": "^6.4.2","electron": "23.1.3"},"dependencies": {"electron-squirrel-startup": "^1.0.0"}
}

💖 配置index.js

electron 运行的main index.js 配置如下

const { app, BrowserWindow } = require('electron')const createWindow = () => {const win = new BrowserWindow({width: 800,height: 600,webPreferences:{webSecurity:false}})win.loadFile('index.html')
}app.whenReady().then(() => {createWindow()app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) {createWindow()}})
})app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit()}
})

⭐打包vue3

vue3前端项目:
[python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示]


调整打包 ./
把所有axios的请求地址都改成完整路径
将dist目录放到electronjs项目中
build-vue-exe
运行start 成功!
start-vue-exe
执行 make 命令打包!
打包输出exe在out目录下
exe-build

⭐打包react

react前端项目:
react搭建在线编辑html的站点——引入grapes实现在线拖拉拽编辑html
调整资源引入路径改为 ./
请求改为完整路径
把打包dist访问初始化的electron项目

运行检查打包文件
build-react
make 打包exe文件。
build-react-app
打包成功!
build-exe-success

⭐总结

前端dist文件

  1. 前端的文件静态资源路径改为相对 ./
  2. axios请求地址使用完整地址

electronjs配置

  1. 配置国内镜像
  2. 配置package的信息其中包含打包的exe名称
  3. index.js 配置打包html的入口文件

electronjs 优势
electronjs 打包前端文件为exe不需要很深代码能力即可实现,是一个基于 React 的框架,对于初级前端开发十分友好,具有以下优势:

  1. 高效性:relectron 充分利用了 React 的虚拟 DOM 和组件化的特性,能够快速构建高效的应用程序。

  2. 跨平台:relectron 支持 Windows、Linux 和 macOS 等多个平台,可以在不同的设备上运行。

  3. 可扩展性:relectron 支持第三方插件和模块,可以方便地集成其他的功能和服务。

  4. 开发效率:relectron 能够让开发者使用熟悉的 React 开发工具和技术,减少学习成本,提高开发效率。

  5. 应用性能:relectron 通过使用本地编译方式提升应用程序的性能,同时支持多窗口和离线使用等特性,提高用户体验。

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
cloud-sky

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 感谢你的阅读!

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

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

相关文章

DPDK系列之三十五DPDK网络数据发送

一、网络数据发送 DPDK分析了不少,但DPDK主要功能是啥?网络通信。所以还得回归到本源来分析一下其对网络数据是如何发送的,也就是说,DPDK如何保证网络数据的高效发送,采用了什么相应的技术手段。 本篇分析介绍一下DPD…

[创业之路-85]:创业公司如何办理云服务器(PaaS)

目录 一、云服务 1.1 云服务器类型 1.2 云服务案例 二、搭建云服务器的基本步骤 二、云服务的架构(架构) 2.1 层次架构 2.2 云平台统一管理功能 2.3 管理工具 一、云服务 1.1 云服务器类型 云服务(Cloud Services)是一种…

【BUG】记一次Maven install 报错 Could not find artifact ...:pom:0.0.1-SNAPSHOT

问题描述 创建一个maven多模块项目,执行install报错Could not find artifact …:pom:0.0.1-SNAPSHOT,然后点击clean也是报错。 原因分析: 从错误日志发现提示无法从远程maven仓库下载父模块,一看应该是哪里配置了强制从远程仓库…

python中split函数的用法

在 Python 中,split() 函数用于将字符串按照指定的分隔符进行划分,并返回一个分割后的字符串列表。 split() 函数的基本语法是: str.split(sepNone, maxsplit-1) 其中,sep 是可选的参数,表示分隔符,默认为 …

【POI-EXCEL-下拉框】POI导出excel下拉框数据太多导致下拉框不显示BUG修复

RT 最近在线上遇到一个很难受的BUG,我一度以为是我代码逻辑出了问题,用了Arthas定位分析之后,开始坚定了信心:大概率是POI的API有问题,比如写入数据过多。 PS:上图为正常的下拉框。但是,当下拉…

微信小程序设计之页面文件pages

一、新建一个项目 首先,下载微信小程序开发工具,具体下载方式可以参考文章《微信小程序开发者工具下载》。 然后,注册小程序账号,具体注册方法,可以参考文章《微信小程序个人账号申请和配置详细教程》。 在得到了测…

【LeetCode刷题-链表】--146.LRU缓存

146.LRU缓存 方法一:哈希表双向链表 使用一个哈希表和一个双向链表维护所有在缓存中的键值对 双向链表按照被使用的顺序存储了这些键值对,靠近头部的键值对是最近使用的,而靠近尾部的键值对是最久使用的哈希表即为普通的哈希映射&#xff0…

[shell,hive] 在shell脚本中将hiveSQL分离出去

将Hive SQL语句写在单独的.hql文件中, 然后在shell脚本中调用这些文件来执行Hive查询。 这样可以将SQL语句与shell脚本分离,使代码更加清晰和易于维护。 基本用法 以下是一个示例,展示如何在shell脚本中使用.hql文件执行Hive查询&#xf…

IntelliJ IDEA 安装mybaits当前运行sql日志插件在线与离线安装方法

先安装好idear 去网上找找这个安装包下载下来,注意版本要完全一致! 比如: https://www.onlinedown.net/soft/1233409.htm手动安装离线插件方法举例 提前下载好插件的安装包 可以去网上下载这个安装包 搜索离线安装包的资源,包…

Java与Redis的集成以及Redis中的项目应用

一、Java连接Redis Redis与MySQL都是数据库&#xff0c;java操作redis其实跟操作mysql的过程是一样的。 1.1 导入依赖 打开IDEA&#xff0c;进入Java项目&#xff0c;导入pom依赖&#xff0c;代码如下&#xff1a; <dependency><groupId>redis.clients</gro…

(复刷) 面试题02.07.链表相交

原题链接&#xff1a;面试题02.07.链表相交 思路&#xff1a; 求相交的起始结点&#xff0c;并不是值相交&#xff0c;而是结点相交&#xff0c;那么也就代表判断条件是指针指向的位置相等即可 A、B链表长度可能不一致&#xff0c;假设他们一定有相交的结点 那么需要做的 就是…

王坚院士:云计算与 GPT 的关系,就是电和电动机的关系

无论是行业&#xff0c;还是阿里&#xff0c;都身处巨变时。已经年过六十的王坚院士&#xff0c;重回阿里&#xff0c;重回大众视野&#xff0c;今年以来&#xff0c;在多个场合都能够看到他的身影。 而每一次他的分享&#xff0c;都值得我们细细品味。 以下为王坚院士在 202…

mysql 元数据

1.概述 数据库元数据&#xff08;DatabaseMetaData&#xff09;&#xff1a;是由Connection对象通过getMetaData方法获取而来&#xff0c;主要封装了是对 数据库本身的一些整体综合信息&#xff0c;例如数据库的产品名称&#xff0c;数据库的版本号&#xff0c;数据库的URL&am…

使用OBS Browser+访问华为云OBS存储【Windows】

背景 项目中使用华为云 S3 存储,java 代码中通过华为云 OBS 提供的esdk-obs-java 来访问文件。 但是,通过 JAVA SDK 方式不太方便运维,所以我们需要一款可视化的客户端软件。 华为云 OBS 自身也提供了一款客户端软件,名为 OBS Browser+。 OBS Browser+简介 OBS Browse…

摩托车商家做展示预约小程序的作用

摩托车与电动车是人们短距离出行的主要工具&#xff0c;而其使用寿命一般是3年左右及以上、一家可能有多个&#xff0c;市场人群庞大且复购属性强&#xff0c;所以其经营商家也非常多。 如今互联网深入&#xff0c;在品牌宣传、客户获取、信息承载、营销等方面需要车辆经营商家…

网络取证-Tomcat-简单

题干&#xff1a; 我们的 SOC 团队在公司内部网的一台 Web 服务器上检测到可疑活动。为了更深入地了解情况&#xff0c;团队捕获了网络流量进行分析。此 pcap 文件可能包含一系列恶意活动&#xff0c;这些活动已导致 Apache Tomcat Web 服务器遭到破坏。我们需要进一步调查这一…

若依笔记(四):代码生成器

已知使用MyBatisPlus代码生成器可以自动生成Entity、Mapper、Service、Controller代码&#xff0c;前提是数据库中有数据表&#xff0c;生成pojo类以及对于该数据表的增删改查命令的代码&#xff0c;若依更进一步能选择表后生成代码、预览、下载&#xff0c;同时可以生产前端代…

【equals比较方法 和 内部类】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言对象比较equals方法内部类实例内部类静态内部类总结 前言 对象比较equals方法 三种比较相等方法&#xff1a; 第一种&#xff0c;如果两侧是基本数据类型&…

使用 C# 在Word中插入图表

Word中的图表功能将数据可视化地呈现在文档中。这为展示数据和进行数据分析提供了一种方便且易于使用的工具&#xff0c;使作者能够以直观的方式传达信息。要通过C#代码来实现在Word中绘制图表&#xff0c;可以借助 Spire.Doc for .NET 控件&#xff0c;具体操作参考下文。 目录…

关于GLibC

查看使用的编译器依赖glibc库位置&#xff1a; gcc --print-file-namelibc.a gcc --print-file-namelibc.so