vue打包的dist文件，再使用eletron打包为exe

1.下载eletron demo

demo

2.npm install

2.1如遇443，使用eletron镜像专用源，参考链接
[eletron]RequestError: connect ETIMEDOUT 20.205.243.166:443，为eletron设置专用源。

3.在electron-quick-start-main下粘贴dist

在这里插入图片描述

4.再粘贴static/logo.ico(大小256*256[必须])

用来修改软件图标，大小必须256*256

5.再修改main.js

5.1改变了index.html路径

javascript">  mainWindow.loadFile('dist/index.html')

5.2创建系统托盘并改变系统托盘图标
5.3内容如下：

javascript">// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('node:path')function createWindow () {// Create the browser window.const mainWindow = new BrowserWindow({width: 800,height: 600,webPreferences: {preload: path.join(__dirname, 'preload.js')}})// and load the index.html of the app.// mainWindow.loadFile('index.html')mainWindow.loadFile('dist/index.html')// Open the DevTools.// mainWindow.webContents.openDevTools()
}// 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', function () {// 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', function () {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.// 创建系统托盘（和托盘事件）和改变.exe文件图片为logo.ico---------------开始
const { Tray, Menu } = require('electron');
let tray = null;app.on('ready', () => {// 使用你指定的图标const iconPath = path.join(__dirname, 'static', 'logo.ico'); // 获取绝对路径// 创建系统托盘tray = new Tray(iconPath);// 创建上下文菜单const contextMenu = Menu.buildFromTemplate([{ label: 'Item 1', click: () => { console.log('Item 1 clicked'); } },{ label: 'Item 2', click: () => { console.log('Item 2 clicked'); } },{ type: 'separator' },{ label: 'Quit', click: () => { app.quit(); } }]);// 设置托盘的上下文菜单tray.setToolTip('This is my application.');tray.setContextMenu(contextMenu);// 可以添加托盘的点击事件tray.on('click', () => {console.log('Tray icon clicked');// 这里可以打开窗口或其他操作});
});// 处理应用退出时的操作
app.on('window-all-closed', () => {if (process.platform !== 'darwin') {app.quit();}
});
// 创建系统托盘和改变.exe文件图片为logo.ico---------------结束

6.最后进行打包，在package.json，添加打包命令

6.1打包命令

javascript">  "scripts": {"start": "electron .","make-win": "npx electron-packager ./ custom-package-name --platform=win32 --arch=x64 --out=jimmy-dist --overwrite --icon=./static/logo.ico"},

6.2完整package.json

javascript">{"name": "electron-quick-start","version": "1.0.0","description": "A minimal Electron application","main": "main.js","scripts": {"start": "electron .","make-win": "npx electron-packager ./ custom-package-name --platform=win32 --arch=x64 --out=jimmy-dist --overwrite --icon=./static/logo.ico"},"repository": "https://github.com/electron/electron-quick-start","keywords": ["Electron","quick","start","tutorial","demo"],"author": "GitHub","license": "CC0-1.0","devDependencies": {"electron": "^33.0.2"}
}