electron+vue——托盘图标及菜单实现 - 前端

效果：

 我的项目结构：

 background.js：

"use strict";
import { app, BrowserWindow, Menu, Tray, nativeImage } from "electron";
import * as path from "path";
const fs = require("fs");let mainWindow = null; // 窗口
let tray = null; // 托盘// 获取图标路径
function getIconPath() {let iconPath = "";const iconFile = "icon.ico"; // 图标文件名// 判断是否在打包模式if (app.isPackaged) {// 打包模式iconPath = path.join(process.resourcesPath, "icons", iconFile); // 路径根据自身情况调整} else {// 开发模式const projectRoot = path.join(__dirname, ".."); // __dirname 指向 dist_electron，但资源在项目根目录，所以..指向上一级iconPath = path.join(projectRoot, "icons", iconFile);}// 检查文件是否存在if (fs.existsSync(iconPath)) {console.log("图标文件存在:", iconPath);return iconPath;} else {console.error("图标文件不存在:", iconPath);// 返回一个默认图标路径或nullreturn null;}
}function createWindow() {// 创建浏览器窗口mainWindow = new BrowserWindow({// 其他icon: getIconPath(), // 本地启动图标
  });
}// 创建系统托盘图标和菜单
function createTray() {// 创建图标const iconPath = getIconPath();const icon = nativeImage.createFromPath(iconPath);// 调整图标大小（可选）icon.resize({ width: 16, height: 16 });tray = new Tray(icon);// 创建上下文菜单const contextMenu = Menu.buildFromTemplate([{label: "显示",click: () => {mainWindow.show();},},{label: "隐藏",click: () => {mainWindow.hide();},},{label: "退出",click: () => {mainWindow.destroy();},},]);tray.setContextMenu(contextMenu); // 设置托盘菜单tray.setToolTip("测试应用"); // 设置托盘图标的提示文本// 托盘图标右键事件（可选）tray.on("right-click", () => {tray.popUpContextMenu(); // 弹出托盘菜单
  });
}// 主进程准备完毕
app.on("ready", async () => {createWindow();createTray();
});

vue.config.js：

const appName = "测试应用";
module.exports = {pluginOptions: {electronBuilder: {builderOptions: {artifactName: "${productName}.${ext}", // 打包生成的安装包名称，默认会有 "Setup ${version}" 后缀appId: `com.alpha.${appName}.app`, // 应用的唯一标识符productName: appName, // 应用名称
        win: {icon: "icons/icon.ico",target: [{target: "nsis",arch: ["x64", "ia32"], // 兼容32位
            },],},// 关键，确保打包后图标文件存在于运行时可访问的位置
        extraResources: [{from: "icons",to: "icons",filter: ["**/*"],},],},},},
};