告别Webpack！用Electron Forge + Vite + Vue3从零搭建桌面应用（附完整配置流程）
告别Webpack！用Electron Forge + Vite + Vue3从零搭建桌面应用（附完整配置流程）
在桌面应用开发领域，Electron一直是跨平台解决方案的首选。然而，随着前端技术的快速发展，传统的Webpack构建工具在开发体验和构建速度上逐渐显露出疲态。本文将带你探索如何利用Electron Forge、Vite和Vue3这一现代化技术组合，从零开始构建高效的Electron应用，彻底告别Webpack时代的缓慢构建和复杂配置。
1. 为什么选择Vite替代Webpack？
Vite作为新一代前端构建工具，凭借其原生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-app@latest my-app -- --template=vite-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开发服务器的URL：
const 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 :src="imageUrl" alt="示例图片"> </template> <script setup> // 正确引用方式 const imageUrl = new URL('./assets/image.png', import.meta.url).href </script>4. 开发与生产环境优化
4.1 开发体验提升
Vite的HMR在Electron中需要特殊配置才能完美工作：
// vite.renderer.config.ts export default defineConfig({ server: { hmr: { protocol: 'ws', host: 'localhost' } } })注意：确保主进程在开发环境下正确加载Vite开发服务器的URL（通常是http://localhost:3000）
4.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 Map<string, 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.env
- CSS处理：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-port=9223", "."], "windows": { "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd" } }7.2 渲染进程调试
利用Chrome DevTools：
- 在创建BrowserWindow时启用devTools：
const win = new BrowserWindow({ webPreferences: { devTools: true } })- 或者使用快捷键：
- Windows/Linux: Ctrl+Shift+I
- macOS: Cmd+Option+I
7.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 -- --platform=all- 自动更新集成：
import { autoUpdater } from 'electron-updater' autoUpdater.checkForUpdatesAndNotify()