1. 为什么选择Electron+Vue3开发桌面应用？
用前端技术开发桌面应用听起来像是"用筷子吃牛排"——看似不搭却意外顺手。我最初接触这个组合是为了快速将一个Vue写的后台管理系统打包成客户端，结果发现开发效率比传统桌面框架高3倍不止。Electron+Vue3的组合优势主要体现在：
- 技术栈统一：前端团队无需学习新语言，直接用熟悉的HTML/CSS/JS开发
- 跨平台特性：一套代码打包Windows/macOS/Linux三端应用
- 现代开发体验：Vue3的Composition API+Electron的IPC通信=高可维护代码
- 生态丰富：npm上有超过100万+的库可直接使用
去年我们团队用这个技术栈开发了一款跨平台Markdown编辑器，从立项到发布仅用了2周时间。实际开发中你会发现，90%的桌面应用功能都能用Web技术实现，剩下10%的特殊需求（如系统托盘、本地文件操作）通过Electron的API也能轻松解决。
2. 环境搭建与项目初始化
2.1 创建Vue3项目
推荐使用Vite作为构建工具，它的冷启动速度比Webpack快10倍以上。执行以下命令创建项目：
npm create vite@latest electron-vue-demo --template vue安装完成后，修改vite.config.js增加开发服务器配置：
export default defineConfig({ server: { port: 3000, // 指定开发服务器端口 open: false // 禁止自动打开浏览器 } })2.2 集成Electron
安装Electron核心包：
npm install electron --save-dev在项目根目录创建electron/main.js作为主进程入口文件：
const { app, BrowserWindow } = require('electron') const path = require('path') let mainWindow function createWindow() { mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true, contextIsolation: false } }) // 开发环境加载Vite开发服务器 if(process.env.NODE_ENV === 'development') { mainWindow.loadURL('http://localhost:3000') mainWindow.webContents.openDevTools() } else { mainWindow.loadFile(path.join(__dirname, '../dist/index.html')) } } app.whenReady().then(createWindow)2.3 配置启动脚本
在package.json中添加这些脚本：
{ "main": "electron/main.js", "scripts": { "dev": "vite", "build": "vite build", "electron:dev": "concurrently -k \"npm run dev\" \"electron .\"", "electron:build": "npm run build && electron-builder" } }安装并发运行工具：
npm install concurrently --save-dev现在执行npm run electron:dev就能同时启动Vite开发服务器和Electron应用了。
3. 核心开发技巧
3.1 进程间通信方案
主进程与渲染进程通信是Electron开发的核心难点。推荐使用electron-ipc的封装方案：
- 在主进程中暴露API：
// electron/main.js const { ipcMain } = require('electron') ipcMain.handle('read-file', async (event, filePath) => { return await fs.promises.readFile(filePath, 'utf-8') })- 在渲染进程中使用：
<script setup> import { ipcRenderer } from 'electron' const readConfigFile = async () => { const content = await ipcRenderer.invoke('read-file', '/path/to/file') console.log(content) } </script>3.2 状态管理方案
对于复杂应用，推荐使用Pinia管理跨进程状态：
// stores/system.js export const useSystemStore = defineStore('system', { state: () => ({ platform: process.platform, version: app.getVersion() }), actions: { async checkUpdate() { // 更新逻辑... } } })3.3 原生功能集成
通过Electron API可以轻松实现这些功能：
// 系统通知 new Notification({ title: '提示', body: '任务已完成' }).show() // 系统托盘 const tray = new Tray('icon.png') tray.setToolTip('我的应用') // 全局快捷键 globalShortcut.register('CommandOrControl+Shift+I', () => { mainWindow.webContents.openDevTools() })4. 生产环境构建
4.1 使用electron-builder打包
安装构建工具：
npm install electron-builder --save-dev基础配置示例：
{ "build": { "appId": "com.example.myapp", "productName": "我的应用", "files": ["dist/**/*", "electron/**/*"], "win": { "target": "nsis", "icon": "build/icon.ico" }, "mac": { "category": "public.app-category.productivity", "icon": "build/icon.icns" } } }4.2 代码签名问题
Windows平台需要购买代码签名证书，macOS需要配置自动公证：
// build/notarize.js require('dotenv').config() const { notarize } = require('electron-notarize') exports.default = async function notarizing(context) { const { electronPlatformName, appOutDir } = context if (electronPlatformName !== 'darwin') return const appName = context.packager.appInfo.productFilename return await notarize({ appBundleId: 'com.example.myapp', appPath: `${appOutDir}/${appName}.app`, appleId: process.env.APPLE_ID, appleIdPassword: process.env.APPLE_ID_PASSWORD }) }5. 常见问题解决方案
5.1 白屏问题处理
在main.js中添加这些容错处理：
mainWindow.webContents.on('did-fail-load', () => { mainWindow.loadURL('fallback.html') }) // 证书错误处理 app.on('certificate-error', (event, webContents, url, error, certificate, callback) => { if(url.startsWith('https://localhost')) { event.preventDefault() callback(true) } else { callback(false) } })5.2 热更新失效
修改Vite配置：
// vite.config.js export default defineConfig({ server: { hmr: { protocol: 'ws', host: 'localhost' } } })5.3 性能优化建议
- 启用原生压缩：
new BrowserWindow({ webPreferences: { spellcheck: false, enableWebSQL: false, // 启用硬件加速 webgl: true, hardwareAcceleration: true } })- 预加载常用脚本：
// preload.js const { contextBridge } = require('electron') contextBridge.exposeInMainWorld('api', { platform: process.platform })
【含Matlab源码 15440期】)