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 打包后默认是不带 . 的,需要自己加上
相关推荐
小圣贤君9 小时前
小说创作中的时间轴体验设计:事序图交互与用户体验优化
electron·vue·甘特图·时序图·写作软件
ayaya_mana14 小时前
BilldDesk:基于Vue3+WebRTC+Nodejs+Electron的开源远程桌面控制
electron·开源·webrtc
卸任16 小时前
Electron运行环境判断(是否在虚拟机中)
前端·react.js·electron
F2E_zeke16 小时前
使用electron将vue3网页项目包装成pc客户端
javascript·vue.js·electron
TangAcrab16 小时前
记一次 electron 添加 检测 终端编码,解决终端打印中文乱码问题
前端·javascript·electron
EndingCoder16 小时前
Electron 高级 UI:集成 React 或 Vue.js
react.js·ui·electron·前端框架
EndingCoder17 小时前
离线应用开发:Service Worker 与缓存
前端·javascript·缓存·性能优化·electron·前端框架
太空游走的鱼2 天前
Vue3 + Vite + Element Plus web转为 Electron 应用,解决无法登录、隐藏自定义导航栏
javascript·electron·vue3·管理系统·element plsu
织_网2 天前
Electron 核心模块速查表
javascript·electron·策略模式
EndingCoder2 天前
Electron 原生模块集成:使用 N-API
javascript·electron·node.js·桌面端