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

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

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

相关文章

42、WEB攻防——通用漏洞文件包含LFIRFI伪协议编码算法代码审计

文章目录 文件包含文件包含原理攻击思路文件包含分类 sessionPHP伪协议进行文件包含 文件包含 文件包含原理 文件包含其实就是引用&#xff0c;相当于C语言中的include <stdio.h>。文件包含漏洞常出现于php脚本中&#xff0c;当include($file)中的$file变量用户可控&am…

Leetcode02.05:链表求和

一、题目描述 给定两个用链表表示的整数&#xff0c;每个节点包含一个数位。 这些数位是反向存放的&#xff0c;也就是个位排在链表首部。 编写函数对这两个整数求和&#xff0c;并用链表形式返回结果。 示例&#xff1a; 输入&#xff1a;(7 -> 1 -> 6) (5 -> 9 -…

大学电子学籍档案管理系统建设方案

一、项目背景 随着大学教育规模的扩大和信息化进程的加快&#xff0c;大学电子学籍档案管理系统的建设成为大学管理的重要内容。传统的纸质学籍档案管理方式存在信息难以共享、查询速度慢、存储空间占用大等问题&#xff0c;无法满足大学学籍管理的需求。因此&#xff0c;建设一…

centos安装inpanel

前置条件 安装python yum -y install python 安装 cd /usr/local git clone https://gitee.com/WangZhe168_admin/inpanel.git cd inpanel python install.py 安装过程需要设置账户 密码 端口号 我设置的是admin:admin 10050 使用 打开浏览器,输入 http://192.168.168.…

CentOS7搭建k8s-v1.28.6集群详情

文章目录 1.灌装集群节点操作系统1.1 设置hosts1.2 设置nameserver1.3 关闭防火墙1.4 关闭Selinux1.5 关闭Swap分区1.6 时间同步1.7 调整内核参数1.8 系统内核升级 2.安装Docker2.1 卸载旧Docker2.2 配置Docker软件源2.3 安装Docker 3.部署Kubernets集群3.1 设置 K8s 软件源3.2…

Day 1. 学习linux高级编程之Shell命令和IO

1.C语言基础 现阶段学习安排 2.IO编程 多任务编程&#xff08;进程、线程&#xff09; 网络编程 数据库编程 3.数据结构 linux软件编程 1.linux&#xff1a; 操作系统&#xff1a;linux其实是操作系统的内核 系统调用&#xff1a;linux内核的函数接口 操作流程&#xff…

第二篇:MySQL安装与配置(基于小皮面板(phpstudy))

在第一篇中介绍了数据库的相关概念&#xff0c;了解到SQL是用来操作数据库管理系统的语言&#xff0c;因此要学习数据库技术&#xff0c;数据库管理系统的配备是必不可少的&#xff01; 并且出于流行性与实惠性的双考量而选择MySQL这款数据库管理系统软件 一&#xff0c;工具推…

el-table动态合并

废话就不多说了&#xff0c;直接上代码&#xff01;&#xff01;&#xff01; 合并行 // 方法一 <template><div class"container"><el-table :data"dataSource" :border"true":header-cell-style"{ font-weight: normal,…

《Lua程序设计》-- 学习10

环境&#xff08;Environment&#xff09; 具有动态名称的全局变量 全局变量的声明 由于Lua语言将全局变量存放在一个普通的表中&#xff0c;所以可以通过元表来发现访问不存在全局变量的情况。 正如前面所提到的&#xff0c;我们不允许值为nil的全局变量&#xff0c;因为值为…

LabVIEW风力发电机在线监测

LabVIEW风力发电机在线监测 随着可再生能源的发展&#xff0c;风力发电成为越来越重要的能源形式。设计了一个基于控制器局域网&#xff08;CAN&#xff09;总线和LabVIEW的风力发电机在线监测系统&#xff0c;实现风力发电机的实时监控和故障诊断&#xff0c;以提高风力发电的…

程序员为什么不喜欢关电脑?

目录 标题&#xff1a;程序员为何乐见电脑长时间处于关闭状态&#xff1f; 引言&#xff1a; 一、思维的延续性&#xff1a; 二、环境的连续性&#xff1a; 三、长时间开机的原因&#xff1a; 四、恢复成本的考量&#xff1a; 结论&#xff1a; 特别的&#xff1a; 不是…

DevOps落地笔记-11|持续集成:软件持续集成,发布信手拈来

上一讲我主要介绍了如何快速的构建环境&#xff0c;以及测试阶段对环境的要求。现在测试环境已经不是阻碍软件开发的障碍了&#xff0c;但另一个问题又出现了&#xff1a;每次测试结果不是不理想&#xff0c;就是问题太多无法继续测试。这是因为&#xff0c;团队成员平时都在自…

扫盲软件开发工具低代码

目录 一、低代码是什么&#xff1f; 二、低代码平台的优势和劣势都是什么&#xff1f; 三、低代码操作方式 四、写在最后 一、低代码是什么&#xff1f; 低代码是一套可视化开发工具&#xff0c;它帮开发者把前后端基础功能写扎实&#xff0c;开发者只需要通过填表配置或拖…

Eclipse离线安装maven、jetty、svn插件;附百度网盘资源链接

Eclipse离线安装maven、jetty、svn插件&#xff1b;附百度网盘资源链接 链接&#xff1a;https://pan.baidu.com/s/1zt4-K4AvGZ4EnSqp0vfDGA 提取码&#xff1a;7980

动态扩缩容下的全局流水号设计

关于全局流水号&#xff0c;业内用的比较多的就是雪花算法&#xff0c;一直没理解在动态扩缩容下其中的workId和 datacenterId如何设置&#xff0c;查到了几个方法&#xff1a;reidis中取&#xff0c;待后期实践下。 先简单的介绍一下雪花算法&#xff0c;雪花算法生成的Id由…

代码随想录Day42 | 背包问题理论 416. 分割等和子集

代码随想录Day42 | 背包问题理论 416. 分割等和子集 二维dp解决背包问题一维dp求解背包问题46.携带研究材料二维dp一维dp 416.分割等和子集 二维dp解决背包问题 文档讲解&#xff1a;代码随想录 视频讲解&#xff1a; 带你学透0-1背包问题 状态 利用五部曲来分析二维dp是如何解…

CF1404BTree Tag/ BZOJ0487. 树上追逐详解

1.题目 传送门:Tree Tag - 洛谷 2.思路 我们考虑什么情况下Alice可以获胜. 如果​ ≤ da&#xff0c;则Alice可以一步就追上Bob. 如果Alice处在一个能覆盖整棵树的点&#xff0c;即2da 1≥树的直径&#xff0c;那么Bob也无论走到哪里Alice都能追到,Alice获胜. 其它情况下…

string容器

#include<iostream> using namespace std; //string的构造函数 void test01() {string s1;//默认构造const char *str"holle word";string s2(str);cout<<"s2"<<s2<<endl;string s3(s2);cout<<"s3"<<s3<…

【Vitis】基于C++函数开发组件的步骤

目录 基本步骤 关键领域 • 硬件接口&#xff1a; 任务级并行度&#xff1a; 存储器架构&#xff1a; 微观级别的最优化&#xff1a; 基本步骤 1. 基于 设计原则 建立算法架构。 2. &#xff08;C 语言仿真&#xff09; 利用 C/C 语言测试激励文件验证 C/C 代码的逻辑。…

六轴机器人奇异点

1 奇异点说明 有着6个自由度的KUKA机器人具有3个不同的奇点位置。即便在给定状态和步骤顺序的情况下,也无法通过逆向变换(将笛卡尔坐标转换成极坐标值)得出唯一数值时,即可认为是一个奇点位置。这种情况下,或者当最小的笛卡尔变化也能导致非常大的轴角度变化时,即为奇点位置…