Electron+React项目打包踩坑记录

首先,如何打包

写下本文的时间是 2024/01/16,搜索了网络上 Electron+React 的打包方式,中间行不通,本文采用的方式是记录本文时 Electron 快速入门(https://www.electronjs.org/zh/docs/latest/tutorial/quick-start)记录的打包方式,最主要的区别在于把 html 文件换成 React 项目打包后 build 文件夹里面的 html 文件了,如下图

踩坑记录

  • 打包前把 package.json 里面的字段补全,否则会报错,直接把下面这段复制粘贴进文件即可
js 复制代码
{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "main.js",
  "author": "Jane Doe",
  "license": "MIT"
}
  • 执行 npx electron-forge import 时魔法需要开全局模式
  • npm run make 时不能开魔法
  • build/index.html 里面的路径需要加上 .,比如 href 属性里的路径,react 打包后默认是不带 . 的,需要自己加上
相关推荐
家里有蜘蛛1 小时前
Electron 桌面应用多实例实践:数据隔离与跨进程互斥
electron
前端Hardy1 天前
Electrobun 正式登场:仅 12MB,JS 桌面开发迎来轻量化新方案!
前端·javascript·electron
羊吖2 天前
Vue3 + Electron 实现纯本地人脸识别登录一体机(离线可用、无云端、带页面跳转)
前端·javascript·electron
卸载引擎2 天前
NTP 授时(Network Time Protocol)核心解读,工控机electron程序自动联网授时案例
前端·javascript·electron
codingWhat2 天前
Electron 入门实战:用一个加法计算器吃透 Electron 核心概念
前端·javascript·electron
loriloy2 天前
Electron 桌面端身份认证 - 本地回环重定向认证 Loopback Interface Redirection
electron·登录认证
ujainu4 天前
Electron 实战:将用户输入保存到本地文件 —— 基于 `fs.writeFileSync` 与 IPC 的安全写入方案
javascript·安全·electron
ujainu4 天前
在 HarmonyOS PC 上实现自定义窗口样式的 Electron 应用详解
华为·electron·harmonyos
ujainu4 天前
Electron 极简时钟应用开发全解析:托盘驻留、精准北京时间与 HarmonyOS PC 适配实战
javascript·electron·harmonyos
小圣贤君4 天前
在 Electron 里造一个「搜书 + 下载」:从 so-novel 到 51mazi 的爬虫实践
前端·人工智能·爬虫·electron·ai写作·小说下载·网文下载