保姆级教程：用Vite+Vue3快速构建Electron桌面应用（含最新配置）-CSDN博客

从零到一：用Vite+Vue3打造现代化Electron桌面应用实战指南

如果你是一名前端开发者，最近想尝试桌面应用开发，但又对传统的Electron开发流程感到繁琐，那么这篇文章就是为你准备的。我最近在重构一个内部工具时，决定放弃老旧的Webpack+Electron组合，转而拥抱Vite+Vue3+Electron这套现代化技术栈。整个过程踩了不少坑，也积累了不少实战经验，今天就来分享这套经过验证的、适合生产环境的完整配置方案。

这篇文章面向的是有一定Vue3和Vite基础，但Electron经验不多的开发者。我会从最基础的环境搭建讲起，涵盖开发、调试、打包、优化的全流程，重点不是简单的代码复制粘贴，而是解释每个配置背后的原理和实际开发中会遇到的问题。你会发现，用Vite+Vue3开发Electron应用，开发体验可以如此流畅。

1. 环境准备与项目初始化

在开始之前，确保你的开发环境已经安装了Node.js（建议18.x或20.x LTS版本）和npm或yarn。我推荐使用pnpm，它在处理Electron这种依赖较多的项目时，速度和磁盘空间占用都有明显优势。

1.1 创建Vue3项目

首先，我们使用Vite官方模板创建一个Vue3项目：

pnpm create vite electron-vue-app --template vue-ts
cd electron-vue-app

这里我选择了TypeScript模板，因为在实际的Electron开发中，类型安全能帮我们避免很多低级错误。创建完成后，先安装基础依赖：

pnpm install

提示：如果你习惯用npm或yarn，命令基本一致，只是包管理器不同。后续所有命令我都会用pnpm示例，你可以自行替换。

1.2 配置Electron开发依赖

接下来安装Electron相关的开发依赖。这里有个关键点：Electron和electron-builder必须放在devDependencies中，因为它们是构建工具，不应该被打包到最终的用户应用中。

pnpm add -D electron electron-builder

安装过程可能会比较慢，特别是第一次安装Electron时，它会下载对应平台的二进制文件。如果遇到网络问题，可以配置镜像源来加速。不过根据我的经验，现在的网络环境已经改善很多，直接安装通常也能成功。

1.3 项目结构调整

一个清晰的目录结构能让后续开发维护更轻松。我推荐这样的结构：

electron-vue-app/
├── src/                    # Vue3前端源码
├── electron/              # Electron主进程代码
│   ├── main.ts           # 主进程入口（TypeScript）
│   ├── preload.ts        # 预加载脚本
│   └── types/            # 类型定义
├── public/               # 静态资源
├── dist/                 # Vite构建输出
├── release/              # Electron打包输出
└── package.json

创建electron目录和基础文件：

mkdir electron
touch electron/main.ts electron/preload.ts

为什么要用TypeScript写Electron代码？除了类型安全外，更重要的是现代IDE（如VSCode）能提供更好的代码补全和错误检查。Electron的API文档虽然完善，但有类型提示开发效率会高很多。

2. Electron主进程与渲染进程配置

2.1 主进程基础配置

打开electron/main.ts，我们先写一个最基本的Electron应用：

import { app, BrowserWindow, Menu } from 'electron'
import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

// 保持对窗口对象的全局引用，避免被垃圾回收
let mainWindow: BrowserWindow | null = null

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1200,
    height: 800,
    minWidth: 800,
    minHeight: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false, // 安全考虑，关闭nodeIntegration
      contextIsolation: true, // 启用上下文隔离
    },
    frame: true, // 是否显示原生窗口边框
    titleBarStyle: 'default', // 标题栏样式
  })

  // 开发环境下加载Vite开发服务器
  if (process.env.NODE_ENV === 'development') {
    mainWindow.loadURL('http://localhost:5173')
    mainWindow.webContents.openDevTools()
  } else {
    // 生产环境加载构建后的文件
    mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
  }

  // 窗口关闭时清理引用
  mainWindow.on('closed', () => {
    mainWindow = null
  })
}

// Electron准备就绪后创建窗口
app.whenReady().then(() => {
  createWindow()
  
  // macOS应用在没有窗口时点击dock图标会重新创建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

// 非macOS平台在所有窗口关闭时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

这里有几个关键配置需要注意：

nodeIntegration: 设置为false是出于安全考虑，避免渲染进程直接访问Node.js API
contextIsolation: 设置为true启用上下文隔离，这是Electron的安全最佳实践
preload: 预加载脚本的路径，这是渲染进程与主进程安全通信的桥梁

2.2 预加载脚本配置

预加载脚本在渲染进程加载之前运行，且能访问Node.js API。我们用它来安全地暴露API给渲染进程：

// electron/preload.ts
import { contextBridge, ipcRenderer } from 'electron'

// 安全地暴露API给渲染进程
contextBridge.exposeInMainWorld('electronAPI', {
  // 获取版本信息
  getVersions: () => ({
    node: process.versions.node,
    chrome: process.versions.chrome,
    electron: process.versions.electron,
  }),
  
  // 与主进程通信的示例
  onUpdateMessage: (callback: (message: string) => void) => {
    ipcRenderer.on('update-message', (_, message) => callback(message))
  },
  
  sendMessage: (message: string) => {
    ipcRenderer.send('message-to-main', message)
  },
  
  // 平台信息
  platform: process.platform,
  
  // 应用信息
  appVersion: process.env.npm_package_version || '1.0.0',
})

// 类型声明，让TypeScript知道window.electronAPI的存在
declare global {
  interface Window {
    electronAPI: {
      getVersions: () => Record<string, string>
      onUpdateMessage: (callback: (message: string) => void) => void
      sendMessage: (message: string) => void
      platform: string
      appVersion: string
    }
  }
}

2.3 配置TypeScript支持

为了让TypeScript能正确识别Electron的类型，我们需要安装类型定义：

pnpm add -D @types/node @types/electron

然后在项目根目录创建tsconfig.node.json：

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "strict": true
  },
  "include": ["electron/**/*", "vite.config.ts"]
}

同时更新根目录的tsconfig.json，在compilerOptions中添加：

{
  "compilerOptions": {
    "types": ["vite/client", "electron"]
  }
}

3. 开发环境配置与优化

3.1 配置Vite开发服务器

为了让Electron能够正确加载Vite开发服务器，我们需要调整Vite配置。打开vite.config.ts：

imp