异常教程

vite electron（长文解析）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：为什么选择 Vite Electron？

在现代 Web 开发中，开发者需要兼顾高效开发体验和跨平台部署能力。Vite 和 Electron 的结合，恰好填补了这一需求。Vite 是新一代前端构建工具，以闪电般的冷启动速度和开箱即用的热更新功能闻名；Electron 则是将 Web 技术（HTML、CSS、JavaScript）转化为桌面应用的强大框架。两者的结合，让开发者能够用熟悉的 Web 技巧，快速构建跨平台的高性能桌面应用。

本文将从零开始，逐步讲解如何通过 Vite 和 Electron 创建一个完整的桌面应用，并通过实际案例展示其开发流程和优势。

什么是 Vite？

核心特性与类比

Vite 的核心优势体现在三个关键词：快、轻、智能。

  • 快速冷启动：传统构建工具（如 Webpack）需要先编译代码才能启动开发服务器，而 Vite 直接利用浏览器的原生 ES 模块（ESM）支持，跳过编译步骤，冷启动时间从几十秒缩短到毫秒级。
  • 按需编译：Vite 在开发过程中仅对修改过的代码进行增量编译，而非全局重新打包。这就像快递公司只配送更新的包裹，而非每次都清空仓库再发货。
  • 轻量级配置：Vite 的默认配置已覆盖绝大多数需求，开发者无需编写复杂配置文件即可启动项目。

Vite 快速入门示例

创建一个 Vite 项目：

npm init vite@latest my-electron-app --template vanilla-js  
cd my-electron-app  
npm install

启动开发服务器：

npm run dev

此时，浏览器会自动打开并显示项目内容，修改代码后页面会立即热更新。

什么是 Electron？

进程模型与核心功能

Electron 将 Chrome 浏览器内核和 Node.js 运行时结合，允许开发者通过 Web 技术构建跨平台（Windows、macOS、Linux）的桌面应用。其核心是双进程架构：

  1. 主进程（Main Process）：控制应用生命周期，管理窗口、系统权限等底层功能。
  2. 渲染进程（Renderer Process）：运行 Web 内容（如 HTML、CSS、JavaScript），与浏览器标签页类似。

Electron 的典型应用场景

  • 跨平台工具（如 VS Code、Slack）
  • 需要系统级功能的应用（如文件操作、摄像头访问）
  • 需要离线运行的 Web 应用

Vite 与 Electron 的结合优势

开发效率的飞跃

将 Vite 引入 Electron 项目，可以解决传统 Electron 开发中的痛点：

  1. 热更新零等待：Electron 默认需要重启应用才能看到代码变化，而 Vite 的热更新能力使其开发体验接近纯 Web 开发。
  2. 快速构建与打包：Vite 的按需编译特性显著缩短了构建时间，Electron 的单文件打包（asar）也能高效压缩应用体积。
  3. 模块化开发：Vite 对 ES 模块的天然支持，与 Electron 的模块化架构高度契合，降低代码耦合度。

类比：快递公司的升级版

想象 Vite 是一个高效的快递公司，而 Electron 是一个覆盖全球的配送网络。Vite 负责快速分拣和打包包裹（代码），Electron 负责将包裹投递到用户的“桌面设备”（不同操作系统），两者协作让交付过程既快又可靠。

实战案例：构建一个待办事项应用

步骤 1：初始化项目

在已有的 Vite 项目中添加 Electron 依赖：

npm install electron --save-dev

创建 Electron 配置文件 electron.js：

// electron.js  
const { app, BrowserWindow } = require('electron');  

let mainWindow;  

app.on('ready', () => {  
  mainWindow = new BrowserWindow({  
    width: 800,  
    height: 600,  
    webPreferences: {  
      nodeIntegration: true,  
      contextIsolation: false,  
    },  
  });  
  mainWindow.loadFile('index.html');  
});

步骤 2：配置 Vite 插件

Electron 主进程需要 Node.js 环境，而 Vite 默认配置可能不支持。通过 vite-plugin-electron 插件解决兼容性问题：

npm install vite-plugin-electron --save-dev

在 vite.config.js 中添加插件：

import electron from 'vite-plugin-electron';  

export default {  
  plugins: [electron({  
    entry: 'electron.js', // 主进程入口文件  
  })],  
};

步骤 3：开发模式运行

在 package.json 中添加启动脚本：

"scripts": {  
  "dev": "vite",  
  "electron": "electron .",  
  "start": "npm run dev & npm run electron"  
}

运行 npm start，Vite 会启动开发服务器，Electron 同时监听代码变化并热更新。

步骤 4：打包应用

使用 electron-builder 生成可执行文件：

npm install electron-builder --save-dev

在 package.json 中配置打包脚本：

"build": "vite build && electron-builder",  
"builder": {  
  "appId": "com.example.todo",  
  "directories": { "build": "dist" },  
  "files": [  
    "dist/renderer/**/*",  
    "electron.js",  
    "package.json"  
  ]  
}

执行 npm run build，即可在 dist 目录下获得跨平台的安装包。

对比其他技术栈：Vite Electron 与 Webpack Electron

指标Vite + ElectronWebpack + Electron
冷启动时间< 1 秒10-30 秒（依赖配置复杂度）
热更新延迟几百毫秒几秒（需重新编译）
配置复杂度简单（默认支持 ES 模块）较高（需配置 loader 和 plugin）
打包体积紧凑（依赖代码分割）可能较大（需手动优化）

通过上表可见，Vite Electron 在开发效率和易用性上具有显著优势，尤其适合快速迭代的项目。

最佳实践与注意事项

性能优化技巧

  1. 代码分割：通过 Vite 的 import() 语法实现动态加载，避免主进程承担过多负担。
  2. 资源管理：使用 preload.js 文件隔离渲染进程与主进程的通信，减少安全风险。
  3. 缓存策略：在 Electron 的 webPreferences 中设置缓存配置，平衡速度与资源占用。

安全性与兼容性

  • 沙箱模式：启用 contextIsolation 和 sandbox 属性，限制渲染进程的 Node.js 权限。
  • 跨平台路径：使用 path 模块处理文件路径，避免因操作系统差异导致的兼容性问题。

结论：Vite Electron 的未来展望

Vite Electron 技术栈正在重塑桌面应用的开发范式。开发者既能享受 Web 技术的灵活性，又能通过 Electron 的强大能力实现系统级功能。随着 Vite 不断优化构建流程，以及 Electron 推出更轻量化的版本（如 Electron Forge），这一组合的潜力将进一步释放。

无论是构建个人工具还是企业级应用，掌握 Vite Electron 的开发模式，都将为开发者打开一个高效、跨平台的全新领域。现在就开始尝试，用熟悉的代码书写桌面应用的未来吧！

最新发布

查看更多文章