Vue3+Vite+Electron实现开发桌面应用

前文：Vue 生态演进指南：主流框架搭配以及Vue CLI vs Vite 与 Vue2 vs Vue3 核心区别

一、含义

用 Vite 作为前端工程化工具，搭建 Vue 3（或 React / 原生 JS）的前端项目，负责代码的编译、热更新、打包；
用 Electron 作为桌面容器，把 Vite 构建的前端页面 "嵌入" 到 Electron 窗口中，同时借助 Electron提供的 Node.js 能力和系统 API，实现桌面应用的功能（比如窗口管理、本地文件操作、菜单定制等）。

简单说：

纯 Vite + Vue 3 开发的项目，运行后是在浏览器里打开的（本质是网页应用）；
加上 Electron 之后，运行的是独立桌面窗口，不是在浏览器里 ------ 但这个窗口里渲染的内容，还是你用 Vite 构建的前端页面。

打个比方更清楚：

纯 Vite 项目 → 你写的内容，只能在 "浏览器这个大房子" 里展示；
Vite + Electron → Electron 给你造了一个 "专属小房间"，把你写的前端内容放进去，这个小房间是独立的桌面程序，不用依赖浏览器也能运行。

而且 Electron 窗口还能做很多浏览器里做不了的事，比如直接读写本地文件、控制窗口大小 / 位置、创建系统托盘图标等。

二、工具

Vite（构建工具）

已经了解 Vite 是 Vue 3 推荐的构建工具，它的核心优势是：

基于浏览器原生的 ESModule，开发环境下无需打包，启动和热更新速度极快；

生产环境基于 Rollup 打包，输出更高效的代码；

对 Vue 3、React 等现代框架有原生优化。
Electron（桌面应用框架）

Electron 是一个能让你用 HTML、CSS、JavaScript（前端技术栈）开发跨平台桌面应用（Windows/Mac/Linux）的框架，核心原理是：

内置 Chromium 浏览器内核（渲染界面） + Node.js 环境（访问系统 API）；

前端写的页面可以直接跑在桌面端，还能调用系统级能力（比如文件读写、窗口控制、系统托盘等）。

三、示例

（1）前置条件

安装 Node.js（建议 16+）；

初始化一个 Vite + Vue 3 项目：

bash 复制代码

# 创建 Vite + Vue 项目
npm create vite@latest my-electron-app -- --template vue
cd my-electron-app
npm install
# 安装 Electron 依赖
npm install electron --save-dev

（2）核心配置（简化版）

新建 electron/main.js（Electron 主进程文件）：

bash 复制代码

const { app, BrowserWindow } = require('electron')
const path = require('path')

// 创建窗口函数
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 允许渲染进程使用 Node.js 能力（开发环境可选）
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  // 加载页面：开发环境加载 Vite 本地服务，生产环境加载打包后的静态文件
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://127.0.0.1:5173/') // Vite 默认开发端口
    win.webContents.openDevTools() // 打开开发者工具
  } else {
    win.loadFile(path.join(__dirname, '../dist/index.html')) // 生产环境加载打包后的文件
  }
}

// Electron 应用就绪后创建窗口
app.whenReady().then(() => {
  createWindow()
  // Mac 系统下关闭窗口后保留应用
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 关闭所有窗口后退出应用（除 Mac 外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

修改 package.json（添加脚本和配置）：

bash 复制代码

{
  "name": "my-electron-app",
  "version": "0.0.0",
  "main": "electron/main.js", // 指定 Electron 主进程入口
  "scripts": {
    "dev": "vite", // 启动 Vite 开发服务
    "electron:dev": "cross-env NODE_ENV=development electron .", // 启动 Electron（需安装 cross-env：npm i cross-env -D）
    "build": "vite build", // 打包前端代码
    "electron:build": "npm run build && electron-builder" // 打包桌面应用（需安装 electron-builder：npm i electron-builder -D）
  }
}

（3）运行效果

先启动 Vite 开发服务：npm run dev；
新开终端启动 Electron：npm run electron:dev；
此时会弹出一个桌面窗口，里面显示的是你用 Vue 3 写的前端页面，和浏览器中访问 http://127.0.0.1:5173 的效果一致，但这是一个独立的桌面应用。

四、总结

vite+electron 是前端构建工具 + 桌面应用框架的组合，用 Vite 高效开发前端页面，用 Electron 把页面变成跨平台桌面应用；
相比传统的 webpack+electron，vite+electron 开发体验更好（启动 / 热更新更快），尤其适配 Vue 3 等现代框架；
核心逻辑是：Vite 负责前端代码的构建，Electron 负责把前端页面封装成桌面窗口，并提供系统级 API 能力。

Vue3+Vite+Electron实现开发桌面应用

一、含义

二、工具

三、示例

（1） 前置条件

（2）核心配置（简化版）

（3）运行效果

四、总结

（1）前置条件