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 打包后默认是不带 . 的,需要自己加上
相关推荐
Momo__9 小时前
Electron应用性能优化:从启动慢到秒开的7个实战技巧
前端·electron
还好还好不是吗1 天前
用 DeepSeek-TUI 接入 MatrixMedia MCP,终端里 AI 对话驱动多平台自动发布
electron·开源
欧阳天风2 天前
electron播放本地音乐的问题
前端·javascript·electron
还好还好不是吗4 天前
我用 Puppeteer 把发掘金文章这步也自动化了——附 CLI 和 MCP 接口
electron·开源
三声三视5 天前
Electron + 鸿蒙分布式投屏:PC 端一键推送画面到鸿蒙设备全实战
分布式·electron·harmonyos·鸿蒙·桌面
廖松洋(Alina)5 天前
02数据模型与单词仓库-鸿蒙PC端Electron开发
前端·华为·electron·开源·harmonyos·鸿蒙
廖松洋(Alina)5 天前
05手写画布实现-鸿蒙PC端Electron开发
华为·electron·开源·harmonyos·鸿蒙
廖松洋(Alina)5 天前
07答案比对与反馈UI-鸿蒙PC端Electron开发
javascript·ui·华为·electron·开源·harmonyos·鸿蒙
廖松洋(Alina)5 天前
10项目总结与优化方向-鸿蒙PC端Electron开发
华为·electron·开源·harmonyos·鸿蒙
廖松洋(Alina)6 天前
04极速划词页面实现-鸿蒙PC端Electron开发
华为·electron·开源·harmonyos·鸿蒙