React18构建Vite+Electron项目以及打包
一.先创建项目
cnpm create vite
选择React => JavaScript =>cd react_vite => cnpm i =>npm run dev



二.安装Electron依赖
指定版本相对稳定
cnpm i electron@19.0.10 -D
cnpm i vite-plugin-electron@0.9.3 -D
cnpm i electron-builder@23.0.1 -D
三.创建electron目录
创建electron/index.js electron文件夹与src同级

index.js:
import { app, BrowserWindow, } from 'electron'
import path from "path"
let mainWin
const createWindow = () => {mainWin = new BrowserWindow({width: 800,height: 500,webPreferences: {nodeIntegration: true,contextIsolation: false}})if (process.env.NODE_ENV !== 'development') {mainWin.loadFile(path.join(__dirname, "../index.html"))} else {// VITE_DEV_SERVER_HOST 如果是undefined 换成 VITE_DEV_SERVER_HOSTNAMEmainWin.loadURL(`http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SERVER_PORT']}`)}
}app.whenReady().then(createWindow)
四.配置vite.config.js与package.json
vite.config.js:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({plugins: [react(), electron({main: {// 置顶 electron 入口文件entry: "electron/index.js"}})],
})
package.json:
把 “type”:“module” 删除掉,添加 "main": "dist/electron/index.js", 指定入口文件

运行项目:npm run dev

打包:修改package.json配置
"build": "vite build && electron-builder",

添加build配置
{"name": "react_vite","private": true,"version": "0.0.0","main": "dist/electron/index.js","scripts": {"dev": "vite","build": "vite build && electron-builder","preview": "vite preview"},"dependencies": {"react": "^18.2.0","react-dom": "^18.2.0"},"devDependencies": {"@types/react": "^18.0.28","@types/react-dom": "^18.0.11","@vitejs/plugin-react": "^3.1.0","electron": "^19.0.10","electron-builder": "^23.0.1","vite": "^4.2.0","vite-plugin-electron": "^0.9.3"},"build": {"appId": "com.electron.desktop","productName": "electron","asar": false,"copyright": "Copyright © 2022 electron","directories": {"output": "release/"},"files": ["dist"],"mac": {"artifactName": "${productName}_${version}.${ext}","target": ["dmg"]},"win": {"target": [{"target": "nsis","arch": ["x64"]}],"artifactName": "${productName}_${version}.${ext}"},"nsis": {"oneClick": false,"perMachine": false,"allowToChangeInstallationDirectory": true,"deleteAppDataOnUninstall": false},"publish": [{"provider": "generic","url": "http://127.0.0.1:8080"}],"releaseInfo": {"releaseNotes": "版本更新的具体内容"}}
}
npm run build
相关文章:
React18构建Vite+Electron项目以及打包
一.先创建项目 cnpm create vite 选择React > JavaScript >cd react_vite > cnpm i >npm run dev 二.安装Electron依赖 指定版本相对稳定 cnpm i electron19.0.10 -D cnpm i vite-plugin-electron0.9.3 -D cnpm i electron-builder23.0.1 -D三.创建electron目录…...
Spark性能调优
Spark性能调优 executor内存不足用UNION ALL代替UNIONpersist与耗时监控用OR替换UNION ALL用JOIN替换IN executor内存不足 问题表现1:Container xx is running beyond physical memory limits. Current usage: xxx GB of x GB physical memory used; xx GB of x GB…...
flutter开发实战-Camera自定义相机拍照功能实现
flutter开发实战-Camera自定义相机拍照功能实现 一、前言 在项目中使用image_picker插件时候,在android设备上使用无法默认设置前置摄像头(暂时不清楚什么原因),由于项目默认需要使用前置摄像头,所以最终采用自定义…...
LeetCode15. 三数之和
15. 三数之和 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 **注意:**答案中不可以包含重复…...
Docker搭建MySQL8主从复制
之前文章我们了解了面试官:说一说Binlog是怎么实现的,这里我们用Docker搭建主从复制环境。 docker安装主从MySQL 这里我们使用MySQL8.0.32版本: 主库配置 master.cnf //基础配置 [client] port3306 socket/var/run/mysqld/mysql.sock [m…...
【前端】日期转换
记录项目中需要处理的日期格式 默认vue2 初级版 将后端传来的数组 [2024/01/29 08:55:18, 2024/01/29 09:55:18, 2024/01/29 10:11:18]转为 [2024-01-29 08:55, 2024-01-29 09:55, 2024-01-29 10:11]方法 convertDateTimeFormat(arr) {var tempArr arr.map(function (dateT…...
Git 怎么设置用户的权限
在团队协作的软件开发中,对于版本控制系统Git来说,确保代码与数据的安全性至关重要。为了实现这一目标,Git提供了灵活且可定制的用户权限管理机制。下面将简单的探讨一下Git如何设置用户的权限,以及如何保护代码和数据。 用户身份…...
大端和小端模式介绍
介绍 “大端”和“小端”通常指的是字节序(Byte Order)的两种类型,也被称为端序(Endianness)。在多字节的数据类型(如整数)中,字节可以以不同的顺序存储,这影响了计算机…...
【vue】报错 Duplicate keys detected 解决方案
错误描述:Duplicate keys detected. This may cause an update error.错误直译:检测到重复的键。这可能会导致错误。错误原因:有相同父元素的多个子元素的v-for有相同的key值。 解决方法: return:{dataList:[{name:张三…...
机器学习_13_SVM支持向量机、感知器模型
文章目录 1 感知器模型1.1 感知器的思想1.2 感知器模型构建1.3 损失函数构建、求解 2 SVM3 线性可分SVM3.1 线性可分SVM—概念3.2 线性可分SVM —SVM 模型公式表示3.3 线性可分SVM —SVM 损失函数3.4 优化函数求解3.5 线性可分SVM—算法流程3.6 线性可分SVM—案例3.7 线性可分S…...
OpenCV学习记录——轮廓检测
文章目录 前言一、寻找、绘制轮廓二、具体应用代码 前言 寻找目标图像的轮廓并绘制出该轮廓是我们进行图像识别时常用的手段,轮廓是图像中连续的边界线,可以用于物体检测、形状分析等应用。为了获取更高的准确性,会先进行二值化处理ÿ…...
FreeRTOS任务挂起以及延时部分源码分析
layout: post title: “任务状态” date: 2023-7-19 15:39:08 0800 tags: FreeRTOS 任务状态 fireRTOS代码分析 任务挂起 //把一个任务挂起 void vTaskSuspend( TaskHandle_t xTaskToSuspend ) {TCB_t *pxTCB;taskENTER_CRITICAL();//进入临界区{/* 参数是NULL的时候设置为当…...
oracle数据库慢查询SQL
目录 场景: 环境: 慢SQL查询一: 问题一:办件列表查询慢 分析: 解决方法: 问题二:系统性卡顿 分析: 解决方法: 慢SQL查询二 扩展: 场景: 线…...
C语言搭配EasyX实现贪吃蛇小游戏
封面展示 内部展示 完整代码 #define _CRT_SECURE_NO_WARNINGS #include<easyx.h> #include<stdio.h> #include<mmsystem.h> #pragma comment (lib,"winmm.lib") #define width 40//宽有40个格子 #define height 30//长有40个格子 #define size 2…...
# 软件安装-Linux搭建nginx(单机版)
软件安装-Linux搭建nginx(单机版) 安装版本:nginx-1.24.0 文章目录 软件安装-Linux搭建nginx(单机版)一、Nginx包下载二、创建用户1.新建组和用户2.设置用户密码3.登录自己创建的目录三、安装依赖组件四、安装Nginx五、启动Nginx六、配置Nginx一、Nginx包下载 1. nginx-1.24下…...
成熟的汽车制造供应商协同平台 要具备哪些功能特性?
汽车行业是一个产业链长且“重”的行业,整个业务流程包括了研发、设计、采购、库存、生产、销售、售后等一系列环节,在每一个环节都涉及到很多信息交换的需求。对内要保证研发、采购、营销等业务环节信息流通高效安全,对外要与上、下游合作伙…...
React16源码: React中处理ref的核心流程源码实现
ref的实现过程 1 )概述 在更新流程当中如何去设置ref上面的对象的过程在我们创建fiber的时候去处理ref这个属性那我们什么时候创建fiber对象? 就是我们去更新某一个节点,然后要去调和它的子节点的时候这个时候我们会对每一个子节点去创建这个fiber对象…...
ref和reactive
看尤雨溪说:为什么Vue3 中应该使用 Ref 而不是 Reactive?...
掌握数据预测的艺术:线性回归模型详解
线性回归是统计学中用于建模两个或多个变量之间线性关系的一种方法,广泛应用于数据分析、机器学习等领域。从数学建模的角度出发,线性回归旨在找到一个线性方程,最好地描述自变量(或称为解释变量、特征变量)和因变量(或称为目标变量)之间的关系。本文将通过Python代码示…...
STM32F407移植OpenHarmony笔记8
继上一篇笔记,成功开启了littlefs文件系统,能读写FLASH上的文件了。 今天继续研究网络功能,让控制台的ping命令能工作。 轻量级系统使用的是liteos_m内核lwip协议栈实现网络功能,需要进行配置开启lwip支持。 lwip的移植分为两部分…...
从沙漏到矿机:聊聊离散元法DEM是怎么‘算’出颗粒世界的(附Rocky/EDEM软件对比与学习资源)
从沙漏到矿机:离散元法DEM如何重构颗粒世界的数字镜像 沙漏里的细沙流淌时,每一粒沙子都在重力和碰撞中演绎着独特的运动轨迹。这种看似简单的物理现象背后,隐藏着一个复杂的多体动力学问题——如何精确描述成千上万颗粒之间的相互作用&#…...
GIL终结者来了!Python原生无锁并发的3大工业级模式:MPMC队列、无等待哈希表、RCU读写分离实战(含perf火焰图验证)
第一章:GIL终结者:Python原生无锁并发的范式革命长久以来,CPython解释器中的全局解释器锁(GIL)被视为Python高并发能力的天然枷锁——它强制同一时刻仅有一个线程执行Python字节码,即便在多核CPU上也无法真…...
嵌入式工程师成长之路(1)——元件基础(完整版)
点击下面图片带您领略全新的嵌入式学习路线 🔥爆款热榜 88万+阅读 1.6万+收藏 文章目录 前言 一、认识元件 ①、认识元件 ②、认识封装 二、电阻 1.上拉电阻与下拉电阻 ①、定义 ②、应用 ③、阻值选择 ④、因上下拉电阻引发的问题 ⑤、因一颗上拉电阻引发的思考 2.高精密采…...
Go 限流器性能优化终极指南:避免缓存伪共享的 padding 策略
Go 限流器性能优化终极指南:避免缓存伪共享的 padding 策略 【免费下载链接】ratelimit A Go blocking leaky-bucket rate limit implementation 项目地址: https://gitcode.com/gh_mirrors/ra/ratelimit 在 Go 高性能限流器开发中,go.uber.org/r…...
Windows网络神器:5分钟掌握socat-windows终极指南,轻松搞定端口转发与数据流处理
Windows网络神器:5分钟掌握socat-windows终极指南,轻松搞定端口转发与数据流处理 【免费下载链接】socat-windows unofficial windows build of socat http://www.dest-unreach.org/socat/ 项目地址: https://gitcode.com/gh_mirrors/so/socat-windows…...
.NET 9容器化避坑清单,12个导致K8s滚动更新失败的隐藏陷阱及修复代码
第一章:.NET 9容器化部署的核心演进与K8s适配全景 .NET 9标志着微软在云原生交付范式上的关键跃迁——其运行时、SDK与基础镜像深度重构,为容器化场景注入原生优化能力。与以往版本相比,.NET 9默认启用AOT(Ahead-of-Timeÿ…...
STM32duino双VL53L1X激光测距库详解
1. 项目概述STM32duino X-NUCLEO-53L1A1 是一个面向 Arduino 兼容生态的 STM32 平台专用驱动库,专为意法半导体(STMicroelectronics)官方扩展板 X-NUCLEO-53L1A1 设计。该扩展板搭载两颗 VL53L1X 飞行时间(Time-of-Flight, ToF&am…...
【无限视距】:R3nzSkin的MOBA视野增强技术原理与实战指南
【无限视距】:R3nzSkin的MOBA视野增强技术原理与实战指南 【免费下载链接】R3nzSkin Skin changer for League of Legends (LOL) 项目地址: https://gitcode.com/gh_mirrors/r3n/R3nzSkin 在MOBA游戏的对抗中,视野控制往往决定战局走向。R3nzSkin…...
从原理到实战:LRU缓存算法的核心机制与工程实践
1. LRU缓存算法的基础原理 最近最少使用(LRU)算法是每个后端工程师都应该掌握的缓存淘汰策略。我第一次在线上系统使用LRU时,发现它完美解决了我们的缓存击穿问题。简单来说,LRU就像图书馆里整理书籍的管理员——总是把最近被借阅…...
用Multisim复刻经典:手把手教你搭建一个60秒倒计时器(附74LS161+4511完整仿真文件)
用Multisim复刻经典:手把手教你搭建一个60秒倒计时器(附74LS1614511完整仿真文件) 在电子工程的学习过程中,没有什么比亲手搭建一个实用电路更能加深理解的了。今天,我们将一起用Multisim这款强大的电路仿真软件&#…...
