Electron+React项目打包踩坑记录

前端千帆2024-01-23 8:31

首先，如何打包

写下本文的时间是 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 打包后默认是不带 . 的，需要自己加上