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 打包后默认是不带 . 的,需要自己加上
相关推荐
大蓝头3 天前
安装包UI美化之路-nsNiuniuSkin全新UI调试与预览方法
ui·electron·安装包·截图控件·截屏控件
flash俊杰4 天前
Electron 打包后窗口 30 秒不出现:一个 ABI 不匹配的血案
electron·node.js
flash俊杰5 天前
Electron 安全纵深:contextIsolation、最小暴露面与 CSP 防线
electron
凤城老人6 天前
从零手写开源私有云盘|Flask+Vue3+Electron全栈网盘,单容器一键部署
python·docker·electron·vue
flash俊杰7 天前
Electron 自定义协议与视频流式加载:从 moov atom 到 Range 请求的工程化实践
electron·前端框架
愛芳芳7 天前
基于 Electron + Vue3 的仿 PC 微信客户端项目实战
前端·javascript·css·elementui·typescript·electron·vue
Patrick_Wilson9 天前
桌面端发布的真实成本:签名、公证和那支不能共享的 USB Key
ci/cd·electron·客户端
爱丶不疚9 天前
Electron: 你是否需要对 Preload 开启 nodeIntegration?
安全·性能优化·electron
爱丶不疚9 天前
Electron:Module 与 Service 的职责边界与加载时序编排
前端·electron·nestjs
爱丶不疚9 天前
Electron: 缓存机制有哪些?能控制的又有哪些
前端·electron·v8