打包报错
按照示例教程打包应用，报错：
- An unhandled rejection has occurred inside Forge:
- Error: Command failed with a non-zero return code (1):
- Fatal error: Unable to commit changes
- Electron Forge was terminated. Location...
本地运行起来的桌面窗口未关闭，先关了再来打包。
引用 react + vite 打包后的 dist 文件白屏
react + vite build 打包后的文件，js 和 css 资源引用路径都是绝对路径，导致 electron 中加载不到对应的文件。
<script type="module" crossorigin src="/assets/index.21b9ac96.js"></script>
<link rel="stylesheet" href="/assets/index.c622ce5d.css">
AI 代码解读
解决办法，配置 vite.config.js 中的 base: './' 为相对路径。
本地运行调试前端项目
正常打包项目是用 win.loadFile 加载打包好的 html 文件，本地运行时可以直接用 win.loadURL 直接引入本地运行的前端服务，方便调试和开发。
// win.loadFile('./dist/index.html')
win.loadURL('http://127.0.0.1:5173/')
AI 代码解读
使用 node 模块
渲染进程使用 node 模块，需要额外配置 webPreferences
// main.js
const {
app, BrowserWindow } = require('electron')
let win = null
app.on('ready', () => {
win = new BrowserWindow({
width: 800,
height: 800,
webPreferences: {
// 在渲染进程中使用node, 需要配置 webPreferences属性
nodeIntegration: true, // 使渲染进程拥有node环境
contextIsolation: false, // 设置此项为false后，才可在渲染进程中使用 electron api，https://www.electronjs.org/zh/docs/latest/api/browser-window
preload: path.join(__dirname, 'preload.js')
})
})
// preload.js
window.require = require
AI 代码解读
注意需要用 preload 预加载脚本去设置下 window.require，这样才能在 vue、react 项目中用 require 去导入 node 相关模块，当然你也可以往 window 上挂载其他需要挂载的，注意这样挂载了不能直接在浏览器中调试，会报错的，要在 electron 中去调试。
主进程和渲染进程通信
ipcRenderer 和 ipcMain 通过 send 和 on 事件监听通信，如果一方收到信息后还要回复另一方，只能通过 event.reply 发送给对方另一个事件实现回复通信。
不过还可以通过 ipcMain.handle 用 promise 来 return 数据实现回复，主进程 ipcMain.handle，渲染进程 ipcRenderer.invoke。
数据传递
vue3 中如果用的 reactive 定义的数据，其实是一个 Proxy 代理对象，直接往主进程传递会报错，要自己 JSON.parse(JSON.stringify(xx)) 或者将数据复制到普通对象进行传递。
查看相关版本号
- electron 版本：process.versions.electron
- NODE版本：process.versions.node
- V8 引擎版本：process.versions.v8
- chrome版本：process.versions.chrome
