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 天前
MatrixMedia v0.10.x 更新:B站封面自定义 + 二开指南,开源项目的开发者体验再升级
electron·开源
习明然2 天前
我的本地化AI项目(三)
人工智能·python·electron·c#·avalonia
Hyyy3 天前
为什么 macOS 应用一换 Bundle ID,之前授予的权限就全失效了?
macos·electron
月走乂山5 天前
Anything Analyzer MCP 401 Unauthorized 故障排查
electron·故障排查·mcp·claude code·anything analyzer
熊猫钓鱼>_>5 天前
Electron:当 Web 技术统治桌面
大数据·前端·javascript·人工智能·架构·electron·agent
程序员老刘5 天前
Opencode从Tauri切回Electron,桌面端技术选型别被体积陷阱带偏了
electron·ai编程
大意的百合5 天前
Electron 应用如何上架微软商店:从 MSIX 打包到商店提交
javascript·microsoft·electron
专职6 天前
electron中拖动文件到桌面案例
前端·javascript·electron
SRET7 天前
Mineradio 沙盒隔离安装完全指南 | 一键安全运行 Electron 应用!!!
javascript·经验分享·安全·electron·aigc·音视频·ai编程
三声三视7 天前
Electron 鸿蒙 PC 上关了子窗口,主窗口也卡死不动——我翻了 Chromium 源码才找到一行注释
electron·harmonyos·鸿蒙