异常教程

electron-vite（建议收藏）

更新时间:

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

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

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

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

在现代开发领域，构建跨平台桌面应用的需求日益增长。开发者们既希望借助熟悉的Web技术栈（如JavaScript、HTML、CSS）快速开发，又渴望获得原生应用的交互体验和系统级功能。Electron 和 Vite 的结合，恰好提供了这一解决方案。Electron-Vite 是指通过Vite工具链优化Electron项目的开发流程，帮助开发者高效构建高性能、跨平台的桌面应用程序。本文将从基础概念、实战案例到进阶技巧，逐步解析这一技术组合的优势与应用方法。

一、Electron与Vite的协同关系

1.1 Electron：连接Web与原生的“桥梁”

Electron 是一个基于Chromium和Node.js的开源框架，允许开发者使用Web技术（如HTML、CSS、JavaScript）构建跨平台的桌面应用。它如同一座“桥梁”，将浏览器的渲染能力与操作系统的原生功能（如文件系统、通知、硬件访问）无缝连接。例如，用户可以通过Electron开发一个支持拖拽文件、调用摄像头的音乐播放器，而无需从底层编写原生代码。

1.2 Vite：Web开发的“高速公路”

Vite 是新一代前端构建工具，通过原生ES模块（ESM）和按需编译技术，大幅缩短开发阶段的启动时间，并提供极快的热更新（HMR）体验。相比传统工具（如Webpack），Vite 将开发环境的代码直接通过浏览器原生支持的ESM加载，避免了复杂的打包过程，如同为开发流程铺设了一条“高速公路”。

1.3 二者结合的意义

Electron-Vite 的组合，将Electron的跨平台能力与Vite的快速开发体验相结合。开发者可以：

  • 快速启动项目，无需等待长时间打包；
  • 在开发阶段实时看到代码修改的效果；
  • 通过Vite的插件生态扩展功能（如TypeScript、CSS预处理器支持）。

二、从零开始搭建Electron-Vite项目

2.1 环境准备

确保已安装以下工具：

  • Node.js（建议版本16+）
  • npm 或 pnpm（包管理器）

2.2 初始化项目

通过命令行创建新目录并初始化：

mkdir my-electron-app  
cd my-electron-app  
npm init -y

2.3 安装依赖

使用以下命令安装核心依赖：

npm install electron electron-builder vite @vitejs/plugin-react --save-dev
  • electron：Electron框架
  • electron-builder：用于打包应用的工具
  • vite：开发服务器和构建工具
  • @vitejs/plugin-react：支持React框架（可根据需求替换为Vue或Svelte插件）

2.4 配置项目结构

典型的项目结构如下：

my-electron-app/  
├── package.json  
├── vite.config.js  
├── main.js           # 主进程代码  
├── src/              # 渲染进程代码目录  
│   ├── index.html  
│   ├── App.jsx  
│   └── ...  
└── electron-builder.json # 打包配置

2.5 配置Vite

在项目根目录创建 vite.config.js，配置开发服务器：

import { defineConfig } from 'vite';  
import react from '@vitejs/plugin-react';  

export default defineConfig({  
  plugins: [react()],  
  server: {  
    port: 3000,          // 开发服务器端口  
    open: true           // 自动打开浏览器  
  },  
  build: {  
    outDir: 'dist'       // 构建输出目录  
  }  
});

2.6 编写主进程代码

Electron 的主进程负责管理应用生命周期和原生功能。在 main.js 中：

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

let mainWindow;  

app.on('ready', () => {  
  mainWindow = new BrowserWindow({  
    width: 800,  
    height: 600,  
    webPreferences: {  
      nodeIntegration: true,  
      contextIsolation: false  
    }  
  });  
  mainWindow.loadURL('http://localhost:3000'); // 加载开发服务器地址  
});

三、核心开发流程详解

3.1 渲染进程与主进程的分工

  • 渲染进程：负责UI界面的渲染（类似浏览器标签页），通过Web技术实现交互逻辑。
  • 主进程：管理原生功能（如创建窗口、处理系统事件），通过IPC（Inter-Process Communication）与渲染进程通信。

3.2 示例：创建一个“计算器”应用

3.2.1 渲染进程代码（src/App.jsx）

import { ipcRenderer } from 'electron';  

function Calculator() {  
  const [result, setResult] = useState(0);  

  const calculate = (a, b, operator) => {  
    ipcRenderer.send('calculate', a, b, operator);  
  };  

  ipcRenderer.on('result', (event, data) => {  
    setResult(data);  
  });  

  return (  
    <div>  
      <input onChange={(e) => setInputValue(e.target.value)} />  
      <button onClick={() => calculate(10, 5, '+')}>+10+5</button>  
      <div>Result: {result}</div>  
    </div>  
  );  
}

3.2.2 主进程逻辑（main.js）

ipcMain.on('calculate', (event, a, b, operator) => {  
  let res;  
  switch (operator) {  
    case '+':  
      res = a + b;  
      break;  
    // 其他运算符逻辑  
  }  
  event.reply('result', res);  
});

3.3 开发模式启动

在 package.json 中添加脚本：

"scripts": {  
  "dev": "vite && electron .",  
  "build": "vite build && electron-builder"  
}

运行 npm run dev 后，Vite 启动开发服务器，Electron 同步加载页面，修改代码后可立即看到效果。

四、优化与进阶技巧

4.1 代码分割与按需加载

通过Vite的插件系统实现代码分割：

// vite.config.js  
export default defineConfig({  
  build: {  
    rollupOptions: {  
      output: {  
        manualChunks: {  
          react: ['react', 'react-dom']  
        }  
      }  
    }  
  }  
});

4.2 资源管理与缓存策略

  • 静态资源：通过Vite的 assets 目录直接引用图片、字体等资源。
  • 缓存控制：在 vite.config.js 中配置： 
    server: {  
  headers: {  
    'Cache-Control': 'no-cache' // 开发阶段禁用缓存  
  }  
}

4.3 性能监控与调试

  • Chrome DevTools：通过Electron的 mainWindow.webContents.openDevTools() 打开调试工具。
  • 性能分析：使用Vite内置的 --profiler 标志分析构建性能瓶颈。

五、常见问题与解决方案

5.1 开发时Electron窗口未显示

原因：主进程代码错误导致应用崩溃。
解决：检查 main.js 中的语法错误，并通过 electron . 直接运行主进程查看控制台输出。

5.2 跨域问题

Electron默认禁用跨域限制，但若需访问外部API，可在主进程中配置：

mainWindow.webContents.session.webRequest.onBeforeSendHeaders(  
  (details, callback) => {  
    details.requestHeaders['Access-Control-Allow-Origin'] = '*';  
    callback({ cancel: false, requestHeaders: details.requestHeaders });  
  }  
);

5.3 打包后的应用体积过大

解决方案：

  1. 使用 electron-builder 的 compression 配置压缩包： 
    "build": {  
  "compression": "maximum"  
}
  2. 移除不必要的依赖，通过 npm prune 清理冗余包。

六、总结与展望

通过 Electron-Vite 的结合，开发者能够以极高的效率构建跨平台桌面应用。Vite的快速开发体验显著提升了迭代速度，而Electron的原生功能支持则扩展了应用的边界。无论是个人项目还是企业级应用，这一技术栈都提供了灵活且强大的工具链。未来，随着Electron和Vite的持续更新，我们期待看到更多创新性的应用诞生于这一组合之上。

关键词布局验证：electron-vite、Electron、Vite、开发流程、跨平台应用、热更新、打包优化、IPC通信、代码分割、性能分析。

最新发布

查看更多文章