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 打包后默认是不带 . 的,需要自己加上
相关推荐
RobinDevNotes2 天前
从 Electron 到 GPUI,9 个跨平台桌面方案该怎么选
前端·javascript·rust·electron·openresty·前端开发工具
不可能片场5 天前
内容运营自动化 配图折行别把词切两半
前端·electron
黄连木笛5 天前
不改一行 Postman 源码,把它汉化了:Electron preload 注入 + fetch 拦截实战
javascript·electron
不可能片场6 天前
Electron 发布 正文写入的三条通道与读回口径
前端·electron
不可能片场7 天前
AI视频成片 帧间差分把拼接缝照出来
前端·electron
Noir热爱生活7 天前
deepseek harness,关于桌面版无法打开vscode修复方案
electron·deepseek
Dream-Y.ocean8 天前
鸿蒙PC平台星图遥感适配实战:基于 Electron 壳方案的纯 JavaScript 遥感图像处理引擎开发
javascript·electron·harmonyos
薛定谔的猫-菜鸟程序员8 天前
Electron开发超详细教程(从入门到放弃)
前端·javascript·electron
北城笑笑8 天前
Vue 106 ,上篇:前端桌面端应用实现方案( Electron 框架详细介绍,Vue + Electron )
前端·javascript·vue.js·python·electron
不可能片场9 天前
Electron 发布 别拿 load 事件当页面就绪
前端·electron