十八、Vue 与 Electron：如何用 Vue 开发跨平台桌面应用

一、项目初始化与基础配置

1.1 开发环境准备

# 安装Node.js与npm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm install --lts

# 安装Vue CLI与Electron Builder
npm install -g @vue/cli electron-builder

1.2 项目脚手架创建

vue create desktop-app
cd desktop-app
vue add electron-builder

1.3 核心配置文件

src/main.js（主进程入口）

const { app, BrowserWindow, ipcMain } = require('electron')

let mainWindow

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  mainWindow.loadURL('http://localhost:8080/')
}

app.whenReady().then(createWindow)

vue.config.js（Electron构建配置）

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        appId: 'com.example.desktop-app',
        productName: 'Todo-App',
        portable: true,
        win: {
          target: 'nsis',
          icon: './build/icons/icon.ico'
        },
        mac: {
          target: 'dmg',
          icon: './build/icons/icon.icns'
        }
      }
    }
  }
}

二、核心开发模式解析

2.1 进程间通信（IPC）

// 主进程（main.js）
ipcMain.on('get-data', (event) => {
  const data = fs.readFileSync('data.json')
  event.reply('data-reply', data.toString())
})

// 渲染进程（Vue组件）
const { ipcRenderer } = require('electron')

export default {
  mounted() {
    ipcRenderer.invoke('get-data').then(data => {
      this.items = JSON.parse(data)
    })
  }
}

2.2 系统级功能集成

创建系统托盘图标

const tray = new Tray(QIcon.fromPath('icon.png'))
tray.setToolTip('Todo App')
tray.on('click', () => {
  if (mainWindow.isMinimized()) {
    mainWindow.restore()
  }
})

文件系统操作

const dialog = require('electron/dialog')

ipcMain.on('save-file', (event) => {
  dialog.showSaveDialog({
    filters: [
      { name: 'Text Files', extensions: ['txt'] }
    ]
  }).then(result => {
    event.reply('save-success', result.filePath)
  })
})

三、性能优化实战

3.1 内存管理优化

// 使用webview替代BrowserWindow
const webview = new WebView()
webview.src = 'http://localhost:8080/'
webview.preload = './preload.js'

// 启用内存回收机制
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

3.2 启动速度提升

// 异步加载资源
const startApp = async () => {
  await new Promise(resolve => {
    require('fs.promises').readFile('assets/icon.png')
    resolve()
  })
  createWindow()
}

app.whenReady().then(startApp)

性能对比表：

四、完整案例：待办事项应用

4.1 项目结构

src/
├── assets/        # 资源文件
├── components/     # 通用组件
├── router/        # 路由配置
├── store/         # Vuex状态管理
├── views/         # 页面视图
└── preload.js     # 预加载脚本

4.2 关键代码实现

Vuex状态管理

export default {
  state: {
    todos: JSON.parse(localStorage.getItem('todos') || '[]')
  },
  mutations: {
    addTodo(state, todo) {
      state.todos.push(todo)
      localStorage.setItem('todos', JSON.stringify(state.todos))
    }
  }
}

Electron快捷键绑定

const { globalShortcut } = require('electron')

globalShortcut.register('CmdOrCtrl+N', () => {
  mainWindow.webContents.send('new-todo')
})

五、高级开发技巧

5.1 安全加固

// 白名单机制
const allowedOrigins = ['http://localhost:8080']

ipcMain.on('access-file', (event, path) => {
  if (!allowedOrigins.includes(event.sender.getWebContents().getURL())) {
    event.preventDefault()
  }
})

5.2 持续集成

GitHub Actions工作流

name: Electron Build

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - name: Install dependencies
      run: npm install
    - name: Build for Windows
      run: npm run electron:build -- --win
    - name: Build for macOS
      run: npm run electron:build -- --mac

六、部署与发布

6.1 打包命令

npm run electron:build -- --linux
npm run electron:build -- --win
npm run electron:build -- --mac

6.2 应用商店发布

Apple Mac App Store提交清单：
• Xcode项目配置
• App Store Connect账号
• 1080p截图（5张）
• 本地化语言包（en.lproj, zh-CN.lproj）

七、总结与生态

1. 技术选型建议：
   • 轻量级应用：Vue + Electron + Vite
   • 复杂应用：Vue3 + TypeScript + Electron Forge
   • 安全要求高：Electron + Rust绑定

2. 未来发展方向：
   • 使用WebAssembly提升性能
   • 集成TensorFlow.js实现AI功能
   • 开发跨平台CLI工具链