Vue3+Vite+Electron桌面应用开发：从零搭建到打包部署全流程

1. 环境准备与项目初始化想要用Vue3ViteElectron开发桌面应用首先得把开发环境搭好。我这里推荐使用Node.js 16版本太老的版本可能会遇到兼容性问题。安装完Node.js后用以下命令检查版本node -v npm -v接下来我们用Vite快速初始化一个Vue3项目npm create vitelatest my-electron-app --template vue cd my-electron-app npm install这个命令会创建一个基础的Vue3项目使用Vite作为构建工具。我建议选择TypeScript模板因为Electron项目通常需要更严格的类型检查。初始化完成后目录结构大概是这样的my-electron-app/ ├── node_modules/ ├── public/ ├── src/ │ ├── assets/ │ ├── components/ │ ├── App.vue │ └── main.ts ├── index.html ├── package.json ├── vite.config.ts └── tsconfig.json2. Electron集成与基础配置2.1 安装Electron核心依赖在项目根目录下执行npm install --save-dev electron electron-builder这里有个坑要注意Electron在国内安装可能会很慢建议先配置淘宝镜像npm config set electron_mirror https://npm.taobao.org/mirrors/electron/2.2 配置Electron主进程在项目根目录创建electron文件夹然后新建main.ts如果用TypeScript或main.js// electron/main.ts import { app, BrowserWindow } from electron import path from path let mainWindow: BrowserWindow | null null function createWindow() { mainWindow new BrowserWindow({ width: 1200, height: 800, webPreferences: { nodeIntegration: true, contextIsolation: false, preload: path.join(__dirname, preload.js) } }) // 开发环境加载Vite开发服务器 if (process.env.NODE_ENV development) { mainWindow.loadURL(http://localhost:5173) mainWindow.webContents.openDevTools() } else { mainWindow.loadFile(path.join(__dirname, ../dist/index.html)) } } app.whenReady().then(createWindow) app.on(window-all-closed, () { if (process.platform ! darwin) app.quit() }) app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) createWindow() })2.3 配置预加载脚本在electron文件夹下创建preload.js// electron/preload.js const { contextBridge } require(electron) contextBridge.exposeInMainWorld(electronAPI, { platform: process.platform })3. 开发环境配置3.1 修改Vite配置更新vite.config.tsimport { defineConfig } from vite import vue from vitejs/plugin-vue import electron from vite-plugin-electron export default defineConfig({ plugins: [ vue(), electron({ entry: electron/main.ts }) ], base: ./, server: { port: 5173 } })3.2 配置package.json添加运行和打包脚本{ scripts: { dev: vite, build: vite build, preview: vite preview, electron:dev: vite electron ., electron:build: vite build electron-builder } }4. 生产环境打包4.1 配置electron-builder在项目根目录创建electron-builder.json{ productName: MyElectronApp, appId: com.example.myapp, directories: { output: release }, files: [ dist/**/*, electron/**/* ], win: { target: nsis, icon: public/icon.ico }, mac: { target: dmg, icon: public/icon.icns }, linux: { target: AppImage, icon: public/icon.png } }4.2 打包命令执行打包npm run electron:build打包完成后会在release目录下生成安装包。Windows下会生成.exe安装程序macOS会生成.dmg。5. 常见问题解决5.1 白屏问题如果打包后打开应用出现白屏检查以下几点Vite配置中base必须设置为./确保dist目录下有完整的构建产物主进程中加载的路径是否正确5.2 require未定义如果在渲染进程中使用require报错需要在Vite配置中添加// vite.config.ts export default defineConfig({ define: { process.env: {} } })5.3 打包速度慢Electron打包时会下载二进制文件可以通过以下方式加速使用淘宝镜像在项目目录下创建.npmrc文件electron_mirrorhttps://npm.taobao.org/mirrors/electron/6. 进阶配置6.1 自动更新要实现应用自动更新可以安装npm install electron-updater然后在主进程中添加import { autoUpdater } from electron-updater app.whenReady().then(() { autoUpdater.checkForUpdatesAndNotify() })6.2 多窗口管理对于复杂应用建议使用window-manager管理多个窗口import WindowManager from electron-window-manager const manager new WindowManager() manager.open(main, { /* 窗口配置 */ })6.3 原生模块支持如果需要使用Node原生模块如serialport需要配置Viteexport default defineConfig({ build: { target: esnext } })7. 项目结构优化成熟的Electron项目建议采用如下结构src/ ├── main/ # 主进程代码 ├── renderer/ # 渲染进程代码 ├── common/ # 共享代码 ├── preload/ # 预加载脚本 └── assets/ # 静态资源对应的Vite配置需要调整export default defineConfig({ root: src/renderer, build: { outDir: ../../dist } })8. 调试技巧8.1 主进程调试在VS Code中添加调试配置{ type: node, request: launch, name: Electron Main, runtimeExecutable: ${workspaceFolder}/node_modules/.bin/electron, args: [.], outputCapture: std }8.2 渲染进程调试可以直接使用Chrome开发者工具在渲染窗口按CtrlShiftIWindows或CmdOptionIMac或者在主进程代码中调用mainWindow.webContents.openDevTools()9. 性能优化9.1 启用硬件加速在主进程创建窗口时启用new BrowserWindow({ webPreferences: { hardwareAcceleration: true } })9.2 代码分割使用Vite的动态导入const module await import(./heavy-module.js)9.3 内存管理及时释放不再使用的窗口win.on(closed, () { win null })10. 安全最佳实践启用上下文隔离new BrowserWindow({ webPreferences: { contextIsolation: true, sandbox: true } })限制远程内容加载mainWindow.webContents.session.webRequest.onBeforeRequest((details, callback) { if (!details.url.startsWith(file://)) { return callback({ cancel: true }) } callback({}) })禁用Node.js集成仅在需要时启用webPreferences: { nodeIntegration: false }