背景：客户有单机运行系统的需求，所以就正好用electron打包一下。

介绍：electron简介：Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。

electron官网：https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-prerequisites

 准备：先是有一个正常可运行的项目，我使用的是react18+vite4

第一步：修改vite.config.js中的base，使用相对路径。否则在完成后打开页面会找不到生成的js文件，导致页面白屏。

第二步：对已有的项目进行build，生成dist文件夹，这个dist文件夹是vite.config.js中默认的配置，根据你项目配置的文件夹为准，自行判断。

第三步：终端进入dist文件夹

第四步：npm初始化，先一直默认的就完事

npm init

 第五步：在dist文件夹下创建main.js和preload.js

// main.js
const { app, BrowserWindow, Menu } = require('electron')
const path = require('path')
console.log("hello")
Menu.setApplicationMenu(null)

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// preload.js
window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
  
    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
  })
  

第六步：修改dist文件夹下的package.json，package.json中的description和author写上值，不然最后一步会报错。

第七步：下载Forge 脚手架并进行设置

npm install --save-dev @electron-forge/cli

npx electron-forge import

这一步出错的话，设置npm electron默认安装路径的环境变量

npm config set ELECTRON_MIRROR http://npmmirror.com/mirrors/electron/

这时候的package.json文件就自动多了一些配置

再运行一下下载命令

npm install

第八步：打包

npm run make

在打包完成之后，会在build文件夹下生成out文件夹
打开out文件夹

第九步：运行

结语：使用electron打包后不影响devlopment环境的运行。需要注意的是在项目有改动之后需要build之前，需要备份一下electron的配置，不然每次都要重新开始。

致谢：

主要使用的是这位的方法：

使用Electron打包React项目_electron react 如何打包_阳春三月少年游的博客-CSDN博客

常规的方法打的包有点大，两百多兆，一开始我是用下面这个链接的方法，但是我没成功，但是他讲得很细致： 

Electron + React 应用打包全流程_electron+react打包_copcin的博客-CSDN博客