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 打包后默认是不带 . 的,需要自己加上
相关推荐
web打印社区3 小时前
[特殊字符] 开源好物:web-print-pdf,让 Web 打印像调用接口一样简单!
前端·javascript·vue.js·electron
森总20209 小时前
Electron 实战:utilityProcess 服务脚本热更新、用户目录优先启动与 asar 依赖解析
electron
政采云技术10 小时前
从投标客户端看 Electron + React 工程化实践
electron
得想办法娶到那个女人10 小时前
Vite + Vue 项目打包为 Electron 桌面应用 完整指南
前端·vue.js·electron
李李李勃谦11 小时前
Vue3 + Electron + OpenHarmony 跨平台实战:从架构设计到 Markdown 编辑器完整实现
javascript·华为·electron·编辑器·harmonyos
森叶11 小时前
Electron 实战:utilityProcess 服务脚本热更新、用户目录优先启动与 asar 依赖解析
前端·javascript·electron
森叶1 天前
Electron 实战:用 utilityProcess 开子进程,去端口化承载协议处理,并由主进程拦截渲染请求后统一中转
前端·javascript·electron
茅盾体1 天前
Electron图标相关
java·前端·electron
ejinxian2 天前
Rust GUI框架Azul与Electron、WebView2
前端·javascript·electron
孙凯亮3 天前
Electron 项目终极实战总结:从黑屏踩坑到自动更新全流程
前端·electron