Electron 后台常驻服务实现（托盘 + 开机自启）

基于 electron-vite-vue 项目结构

本篇将详细介绍如何为 Electron 应用实现后台常驻运行，包括：

• ✅ 创建系统托盘图标（Tray）
• ✅ 支持点击托盘菜单控制窗口显示/退出
• ✅ 实现开机自启功能（Auto Launch）

📁 项目结构建议

electron-vite-vue/
├── electron/
│   ├── main/
│   │   ├── index.ts        # 主进程入口
│   │   ├── tray.ts         # 托盘功能实现
│   │   └── autostart.ts    # 开机启动功能
├── resources/
│   └── iconTemplate.png    # 托盘图标
├── src/
│   └── App.vue
└── package.json

🖼️ 1. 托盘功能实现（electron/main/tray.ts）

import { Tray, Menu, BrowserWindow, nativeImage, app } from 'electron'
import path from 'path'

let tray: Tray | null = null

export function createTray(win: BrowserWindow) {
  const icon = nativeImage.createFromPath(
    path.join(__dirname, '../../resources/iconTemplate.png')
  )
  icon.setTemplateImage(true) // macOS 支持暗黑模式适配

  tray = new Tray(icon)
  tray.setToolTip('我的 Electron 应用')

  const contextMenu = Menu.buildFromTemplate([
    { label: '显示窗口', click: () => win.show() },
    { label: '退出', click: () => { app.quit() } }
  ])
  tray.setContextMenu(contextMenu)

  tray.on('click', () => {
    win.isVisible() ? win.hide() : win.show()
  })

  tray.on('double-click', () => {
    win.show()
  })
}

🧩 2. 主窗口关闭时隐藏到托盘（electron/main/index.ts）

mainWindow.on('close', (e) => {
  if (!app.isQuiting) {
    e.preventDefault()
    mainWindow.hide()
  }
})

⚙️ 3. 开机启动功能（electron/main/autostart.ts）

import { app } from 'electron'

export function enableAutoLaunch() {
  app.setLoginItemSettings({
    openAtLogin: true,
    path: app.getPath('exe') // 自动获取应用路径
  })
}

Windows/macOS 默认支持。Linux 需要创建 .desktop 文件或使用 auto-launch 库。

🔗 4. 在主进程入口中调用（electron/main/index.ts）

import { enableAutoLaunch } from './autostart'
import { createTray } from './tray'

app.whenReady().then(() => {
  mainWindow = createWindow()
  enableAutoLaunch()
  createTray(mainWindow)
})

🧪 注意事项（平台兼容）

✅ 效果总结

📚 推荐阅读

• Electron 官方 Tray 文档
• Electron 开机启动说明
• electron-vite-vue 模板