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_Vue3 自定义系统托盘及退出二次确认
前端·javascript·electron
lpfasd1231 天前
从 Electron 转向 Tauri:用 Rust 打造更轻、更快的桌面应用
javascript·rust·electron
前端架构师-老李4 天前
16 Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
飞鸟真人4 天前
VUE+Electron从0开始搭建开发环境
electron·vue
mapbar_front5 天前
Electron 应用自动更新方案:electron-updater 完整指南
前端·javascript·electron
Java陈序员6 天前
免费高颜值!一款跨平台桌面端视频资源播放器!
vue.js·typescript·electron
Rysxt_7 天前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
似水流年QC7 天前
Electron 实战|Vue 桌面端开发从入门到上线
vue.js·electron·桌面端
前端架构师-老李7 天前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
Rysxt_7 天前
Electron 教程:从背景到 Vue3 桌面应用开发
前端·javascript·electron