告别Webpack！用Electron Forge + Vite + Vue3从零搭建桌面应用（附完整配置流程）

告别Webpack用Electron Forge Vite Vue3从零搭建桌面应用附完整配置流程在桌面应用开发领域Electron一直是跨平台解决方案的首选。然而随着前端技术的快速发展传统的Webpack构建工具在开发体验和构建速度上逐渐显露出疲态。本文将带你探索如何利用Electron Forge、Vite和Vue3这一现代化技术组合从零开始构建高效的Electron应用彻底告别Webpack时代的缓慢构建和复杂配置。1. 为什么选择Vite替代WebpackVite作为新一代前端构建工具凭借其原生ES模块支持和极速的热更新HMR机制正在快速改变前端开发者的工作流。在Electron项目中Vite带来的优势尤为明显闪电般的冷启动Vite直接利用浏览器原生ES模块加载无需打包整个应用即时热更新HMR速度比Webpack快10-100倍大幅提升开发效率更简单的配置Vite的配置比Webpack简洁得多学习曲线平缓更小的打包体积生产构建时Vite使用Rollup进行高效打包# 构建速度对比相同项目 Webpack: 12.3s Vite: 1.8s提示Electron应用特别适合Vite因为Electron本身就是一个Node.js环境可以充分利用Vite的ES模块特性。2. 项目初始化与环境配置2.1 创建基础项目结构首先我们需要使用Electron Forge的Vite模板初始化项目npm init electron-applatest my-app -- --templatevite-typescript这个命令会创建一个包含以下核心文件的项目结构my-app/ ├── src/ │ ├── main.ts # 主进程代码 │ ├── preload.ts # 预加载脚本 │ ├── renderer.ts # 渲染进程入口 ├── vite.main.config.ts # 主进程Vite配置 ├── vite.renderer.config.ts # 渲染进程Vite配置2.2 安装Vue3相关依赖接下来我们需要添加Vue3支持npm install vue vitejs/plugin-vue然后修改vite.renderer.config.ts以启用Vue插件import { defineConfig } from vite import vue from vitejs/plugin-vue export default defineConfig({ plugins: [vue()] })3. 核心配置详解3.1 主进程与渲染进程的协同工作Electron应用的核心架构包含两个主要部分组成部分职责技术栈主进程应用生命周期管理、原生API调用Node.js Electron API渲染进程用户界面展示Vue3 Vite关键配置点在src/main.ts中创建BrowserWindow时需要正确配置Vite开发服务器的URLconst createWindow () { const win new BrowserWindow({ webPreferences: { preload: path.join(__dirname, preload.js) } }) if (process.env.NODE_ENV development) { win.loadURL(http://localhost:3000) win.webContents.openDevTools() } else { win.loadFile(path.join(__dirname, ../renderer/index.html)) } }预加载脚本的安全隔离// src/preload.ts import { contextBridge, ipcRenderer } from electron contextBridge.exposeInMainWorld(electronAPI, { sendMessage: (message: string) ipcRenderer.send(message, message) })3.2 静态资源处理策略Vite与Webpack在资源处理上有显著差异开发环境Vite直接提供原始文件不进行打包生产环境资源路径需要特殊处理对于Electron项目推荐以下资源存放结构public/ |- images/ # 静态图片 |- styles/ # 全局样式 src/ |- assets/ # 需要处理的资源在Vue组件中引用资源template img :srcimageUrl alt示例图片 /template script setup // 正确引用方式 const imageUrl new URL(./assets/image.png, import.meta.url).href /script4. 开发与生产环境优化4.1 开发体验提升Vite的HMR在Electron中需要特殊配置才能完美工作// vite.renderer.config.ts export default defineConfig({ server: { hmr: { protocol: ws, host: localhost } } })注意确保主进程在开发环境下正确加载Vite开发服务器的URL通常是http://localhost:30004.2 生产构建优化使用Electron Forge进行打包npm run make构建输出目录结构out/ |- make/ # 安装包生成器输出 |- my-app-win32-x64/ # 可执行程序目录对于生产构建我们可以进一步优化压缩渲染进程代码// vite.renderer.config.ts export default defineConfig({ build: { minify: terser, terserOptions: { compress: { drop_console: true } } } })主进程代码分割// vite.main.config.ts export default defineConfig({ build: { rollupOptions: { output: { manualChunks: (id) { if (id.includes(node_modules)) { return vendor } } } } } })5. 高级功能集成5.1 UI组件库引入以Element Plus为例npm install element-plus element-plus/icons-vue配置自动导入// vite.renderer.config.ts import Components from unplugin-vue-components/vite import { ElementPlusResolver } from unplugin-vue-components/resolvers export default defineConfig({ plugins: [ Components({ resolvers: [ElementPlusResolver()] }) ] })5.2 原生Node模块支持如果需要使用原生Node模块如serialport首先安装模块npm install serialport在Forge配置中启用原生模块重建// forge.config.js module.exports { rebuildConfig: {}, makers: [...], plugins: [ { name: electron-forge/plugin-auto-unpack-natives, config: {} } ] }在主进程中使用import { SerialPort } from serialport const ports await SerialPort.list()5.3 多窗口管理实现多窗口应用的推荐模式// src/windowManager.ts export class WindowManager { private static instances new Mapstring, BrowserWindow() static createWindow(id: string, options: BrowserWindowConstructorOptions) { if (this.instances.has(id)) { const win this.instances.get(id) win?.focus() return } const win new BrowserWindow(options) this.instances.set(id, win) win.on(closed, () { this.instances.delete(id) }) } }6. 迁移现有Webpack项目如果你有一个基于Webpack的Electron项目迁移到Vite需要特别注意静态资源路径Webpack的require语法需要替换为Vite的import.meta.url环境变量Vite使用import.meta.env替代process.envCSS处理Vite原生支持PostCSS和CSS模块配置更简单迁移步骤示例备份现有项目使用Forge创建新的Vite项目逐步迁移源代码先迁移主进程代码然后迁移渲染进程组件最后处理构建配置测试各功能模块// Webpack - Vite转换示例 // 旧代码 const logo require(./assets/logo.png) // 新代码 const logo new URL(./assets/logo.png, import.meta.url).href7. 调试与问题排查7.1 主进程调试在VS Code中添加调试配置{ type: node, request: launch, name: Electron Main, runtimeExecutable: ${workspaceFolder}/node_modules/.bin/electron, runtimeArgs: [--remote-debugging-port9223, .], windows: { runtimeExecutable: ${workspaceFolder}/node_modules/.bin/electron.cmd } }7.2 渲染进程调试利用Chrome DevTools在创建BrowserWindow时启用devToolsconst win new BrowserWindow({ webPreferences: { devTools: true } })或者使用快捷键Windows/Linux: CtrlShiftImacOS: CmdOptionI7.3 常见问题解决方案HMR不工作确保Vite服务器配置正确检查Electron窗口加载的URL是否正确require is not defined在渲染进程中使用import代替require或者配置nodeIntegration为true不推荐原生模块加载失败确保已运行electron-rebuild检查模块是否与Electron版本兼容// 不推荐的解决方案安全风险 new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false } })8. 性能优化实战8.1 渲染进程优化按需加载组件script setup const HeavyComponent defineAsyncComponent(() import(./components/HeavyComponent.vue) ) /script状态管理优化使用Pinia替代Vuex实现细粒度响应式// store/user.ts export const useUserStore defineStore(user, () { const name ref() const age ref(0) return { name, age } })8.2 主进程优化I/O操作异步化import { readFile } from node:fs/promises const loadConfig async () { try { const data await readFile(config.json, utf-8) return JSON.parse(data) } catch (err) { console.error(Config load failed:, err) return null } }进程间通信优化// 主进程 ipcMain.handle(get-files, async (event, path) { return await readdir(path) }) // 渲染进程 const files await ipcRenderer.invoke(get-files, /path/to/dir)8.3 打包优化资源压缩// forge.config.js module.exports { packagerConfig: { asar: true, extraResource: [public/static] } }多平台构建npm run make -- --platformall自动更新集成import { autoUpdater } from electron-updater autoUpdater.checkForUpdatesAndNotify()