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 net 模块你可以没用过,但不能不知道
前端·electron
瑞码空间5 天前
Web应用的多端部署之道:浏览器 · Electron · Docker
前端·docker·electron·浏览器·web
upgrador13 天前
桌面应用开发:Electron 与 NSIS 的关系、打包流程及 Windows 本地构建实战
javascript·windows·electron
盒子里的加菲猫14 天前
什么?不会C语言也可以搭建窗口级应用程序?(Electron)
c语言·开发语言·electron
薛定谔的猫-菜鸟程序员16 天前
基于 Electron 的本地短视频解析与下载工具:架构设计与工程实践
java·electron·音视频
imber16 天前
别把多平台发布当复制粘贴:一套可复用的内容工程工作流
electron
imber16 天前
Visual Muse 三平台真实发布验收
electron
前端逗比逗17 天前
Electron 全维度完整配置手册(最新稳定版,适配 Electron 25+)
前端·electron
寒水馨20 天前
Windows下载、安装electron-v43.2.0(附安装包electron-v43.2.0-win32-x64.zip)
javascript·windows·typescript·electron·跨平台·桌面应用·chromium
寒水馨20 天前
macOS下载、安装electron-v43.2.0(附安装包electron-v43.2.0-darwin-arm64.zip)
javascript·macos·electron·node.js·跨平台·桌面应用开发·开源框架