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 打包后默认是不带 . 的,需要自己加上
相关推荐
曾经的你d21 小时前
【electron+vue】常见功能之——调用打开/关闭系统软键盘,解决打包后键盘无法关闭问题
vue.js·electron·计算机外设
2501_915373882 天前
Electron 打包与发布指南:让你的应用运行在 Windows、macOS、Linux
windows·macos·electron
Lysun0012 天前
electron 结合 react(cra创建的) 创建桌面应用和打包桌面应用
javascript·react.js·electron
Hugh_W3 天前
Electron 设置Chrome Flags
electron
未脱发程序员4 天前
分享一款开源的图片去重软件 ImageContrastTools,基于Electron和hash算法
前端·javascript·electron
2501_915373884 天前
打造一个 Markdown 编辑器:Electron 项目实战教程
javascript·electron·编辑器
2501_915373888 天前
Electron 从零开始:构建你的第一个桌面应用
前端·javascript·electron
2501_915373888 天前
Electron 架构详解:主进程与渲染进程的协作机制
electron
Acaibird.8 天前
腾讯元宝桌面客户端:基于Tauri的开源技术解析
ai·electron·tauri·跨平台开发
qq_589568109 天前
Electron学习+打包
前端·javascript·electron