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 天前
Electron自制翻译工具:增加中英互译
前端·react.js·electron
皓子3 天前
海狸IM桌面端:AI辅助开发的技术架构实践
前端·electron·ai编程
xiaobangsky5 天前
Electron桌面应用下,在拍照、展示pdf等模块时,容易导致应用白屏
javascript·electron
就是我5 天前
Electron多窗口应用实战
前端·javascript·electron
我怎么能这么帅气5 天前
从“文件失踪案”说起:Electron 中 getAppPath 和 getPath 的妙用
前端·javascript·electron
集成显卡8 天前
图片压缩工具 | Electron+Vue3+Rsbuild开发桌面应用
前端·javascript·electron·vue
朝阳398 天前
Electron-vite【实战】MD 编辑器 -- 系统菜单(含菜单封装,新建文件,打开文件,打开文件夹,保存文件,退出系统)
electron·编辑器
朝阳399 天前
Electron-vite【实战】MD 编辑器 -- 文件列表(含右键快捷菜单,重命名文件,删除本地文件,打开本地目录等)
electron·编辑器
HCl+NaOH=NaCl+H_2O9 天前
quasar electron mode如何打包无边框桌面应用程序
前端·javascript·electron
屋昂仼9 天前
Electron 桌面程序读取dll动态库
前端·javascript·electron