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 打包后默认是不带 . 的,需要自己加上
相关推荐
好脾气姑娘18 小时前
Electron应用实践——前端该如何开发桌面应用
前端·electron
樊南4 天前
npm安装electron依赖时卡顿,下载不下来
前端·electron·npm
web前端进阶者4 天前
electron-vite_15打包报错proxyconnect
前端·javascript·electron
407指导员4 天前
electron 顶部的元素点不中,点击事件不生效
前端·javascript·electron
努力学前端Hang4 天前
electron-vite打包后图标不生效问题
前端·javascript·electron
朝阳394 天前
electron-vite【实战】自定义标题栏【组件封装】(含异形标题栏,指定区域拖拽,窗口置顶,窗口最小化,窗口最大化,取消最大化,隐藏窗口到托盘等)
electron
朝阳394 天前
electron-vite【实战】登录/注册页
electron
他在时间门外4 天前
使用Electron获取用户信息,监听程序打开,用户退出连接关闭程序【全代码,有图】
前端·javascript·electron
407指导员4 天前
electron opacity 百分比设置不生效 变成1% 问题
前端·javascript·electron
森叶4 天前
【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容
webpack·electron