Electron生成 exe

需求：

打包PC 桌面程序，

前提条件：

1、node （有个nvm 管理工具 可以管理不同的node版本）

2、Electron 官网入口

 

步骤：

1、安装前置内容

2、编辑 main.js package.js preload.js 文件

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow} = require('electron')


// 创建一个UDP客户端 socket
// const dgram = require('dgram');
// const client = dgram.createSocket('udp4');
// function sendUDPMessage(msg) {
//   // 发送消息给服务器
//   client.send(msg, 50913, '127.0.0.1', (err) => {
//     if (err) {
//       console.error(err);
//     } else {
//       console.log('Message sent');
//     }
//   });
// }

// 实现WebSocket服务器
// const WebSocket = require('ws');
// let server;
// app.on('ready', () => {
//   // 创建WebSocket服务器
//   server = new WebSocket.Server({ port: 6000 });

//   server.on('connection', (socket) => {
//     console.log('Client connected');
//     socket.on('message', (message) => {
//       console.log(`Received: ${message}`);
//       // 可以在这里处理消息并回传给客户端
//       socket.send('Message received');
//       sendUDPMessage(message);

//     });
//   });
//   createWindow(); // 服务启动完成、创建窗口
// });





const path = require('node:path')

const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    // 窗口大小
    // width: 800,
    // height: 600,
    // 页面路径
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      autoplayPolicy: 'no-user-gesture-required', // 允许自动播放视频
      // 内部通信
      // nodeIntegration: true, // 或者在 Electron >= 12 中使用 contextIsolation: false 和 nodeIntegration: true
      // contextIsolation: false // 对于 Electron >= 12 是必需的
    },
    // 窗口背景色
    // backgroundColor: '#2e2c29'
  })
  // 加载本地资源页面
  mainWindow.loadFile('data/index.html')

  // mainWindow.loadURL('https://app.singmap.com')

  mainWindow.setFullScreen(true) // 全屏

  mainWindow.removeMenu() // 去除菜单栏

  // mainWindow.webContents.openDevTools() // 打开开发者工具


  // 页面通信

  // 监听渲染进程发来的消息
  // ipcMain.on('messageToMain', (event, arg) => {
  //   console.log(arg) // 打印从渲染进程接收到的消息
  //   switch (arg) {
  //     case 'max':
  //       mainWindow.setFullScreen(true) // 全屏
  //       break;
  //     case 'min':
  //       mainWindow.setFullScreen(false) // 不全屏
  //       break;
  //     case 'quit':
  //       app.quit()
  //       break;
    
  //     default:
  //       break;
  //   }
  //   // 向渲染进程回复消息
  //   event.sender.send('replyFromMain', 'Hello from Main, received your message!')
  // })


}



// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})


// Quit when all windows are closed, except on macOS. There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

 

// package.js


{
  "name": "SoraSalesKit",
  "version": "1.0.0",
  "description": "Sora Sales Kit Pro",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "electron-forge start",
    "make": "electron-forge make",
    "packager": "electron-packager . exe --win --out ../exe --arch=x64 --electron-version=10.1.0",
    "packager32": "electron-packager . exe --win --out ../exe --arch=ia32 --electron-version=10.1.0 --overwrite --ignore=node_modules --electron-zip-dir=./electron-zip",
    "package": "electron-forge package"
  },
  "author": "cc",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^7.4.0",
    "@electron-forge/maker-deb": "^7.4.0",
    "@electron-forge/maker-rpm": "^7.4.0",
    "@electron-forge/maker-squirrel": "^7.4.0",
    "@electron-forge/maker-zip": "^7.4.0",
    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
    "@electron-forge/plugin-fuses": "^7.4.0",
    "@electron/fuses": "^1.8.0",
    "electron": "^31.0.0"
  },
  "dependencies": {
    "dgram": "^1.0.1",
    "electron-squirrel-startup": "^1.0.1",
    "ws": "^8.17.0"
  },
  "build": {
    "fuses": {
      "node-symbol-resolver": {
        "enable": true
      }
    }
  }
}

 

 

// preload.js

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const dependency of ['chrome', 'node', 'electron']) {
    replaceText(`${dependency}-version`, process.versions[dependency])
  }
})

 

常用命令：

nvm list :查看node已安装版本

nvm use 12.14.0 : 切换node版本

npm start : 启动项目

npm run make : 打包项目

 

 

遇到的问题：

1、node版本问题

2、win32 打包失败问题

添加 forge.config.js 文件进行打包预处理

// forge.config.js


module.exports = {
  packagerConfig: {},
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-squirrel',
      platforms: ['win32'],
      config: {
      }
    },
    {
      name: '@electron-forge/maker-zip',
      config: {}
    },
    {
      name: '@electron-forge/maker-deb',
      config: {}
    },
    {
      name: '@electron-forge/maker-rpm',
      config: {}
    }
  ]
}