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 打包后默认是不带 . 的,需要自己加上
相关推荐
TrisighT29 分钟前
Electron 跑在鸿蒙 PC 上比 Windows 还省内存?我测完沉默了
electron·harmonyos
怕浪猫2 小时前
Electron 开发实战(十四):实战项目|从零搭建轻量化桌面代码编辑器
前端·electron·node.js
xcLeigh16 小时前
鸿蒙平台 KeePass 密码管理器适配实战:从 Windows 到 鸿蒙PC 的 Electron 迁移指南
windows·electron·web·harmonyos·加密算法·keepass
xcLeigh21 小时前
鸿蒙平台 gThumb 图片查看器适配实战:从 Linux GTK 到 Electron 鸿蒙壳工程
linux·electron·harmonyos·gnome·桌面环境·gthumb
xcLeigh1 天前
鸿蒙PC平台 imv 图片查看器适配实战:极简主义设计的 Electron 迁移
华为·electron·harmonyos·鸿蒙·imv·图片操作·web_engine
xcLeigh1 天前
鸿蒙PC平台 Shotwell 照片管理器适配实战:从 Linux GNOME 到 鸿蒙PC 的 Electron 迁移
linux·electron·harmonyos·鸿蒙·shotwell·照片管理器
AI科技星2 天前
第三卷:质数王朝志(全卷定稿)
c语言·开发语言·汇编·electron·概率论
三声三视3 天前
Electron 本地图片在鸿蒙 PC 上白图,我注册了个自定义协议
electron·harmonyos·鸿蒙
AI科技星3 天前
《全域数学/数术工坊》体系总览
c语言·开发语言·汇编·electron·概率论
怕浪猫3 天前
Electron 开发实战(十三):性能优化策略|极速启动、低内存、流畅渲染、极致瘦身
前端·javascript·electron