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 打包后默认是不带 . 的,需要自己加上
相关推荐
庄雨山2 天前
鸿蒙PC开发实战:基于Electron快速构建Web技术栈桌面应用
electron·harmonyos
爱吃的强哥3 天前
Springboot 使用 SSE推送消息到客户端(Electron)
java·spring boot·electron
寒季6664 天前
Electron 实战:构建跨平台桌面端 Markdown 编辑器(含实时预览、文件操作、快捷键)
华为·electron·harmonyos
Jiangnan_Cai5 天前
【Electron】Windows 下打包遇到 dist/unpacked 文件内 electron.exe 文件缺失问题
前端·javascript·electron
自不量力的A同学5 天前
Electron 40.0.0 发布,跨平台桌面应用开发工具
前端·javascript·electron
michael_ouyang5 天前
WebSocket 鉴权方案选型与 Electron 应用的最佳实践
前端·websocket·网络协议·electron
写bug的可宋8 天前
【Electron】解决Electron使用阿里iconfont不生效问题(react+vite)
javascript·react.js·electron
凉介Nova10 天前
Electron 应用体积从 190MB+ 到 90MB:一次「release 目录反推」的瘦身实战(electron-builder + Vite)
electron
winfredzhang10 天前
零基础打造轻量级桌面备忘录:Electron 核心技术实战
前端·javascript·electron·备忘录
放逐者-保持本心,方可放逐10 天前
electron 中的那些事(很关键)-核心要点补充
前端·javascript·electron