24. 前端-js框架-Electron

文章目录

前言
[一、Electron 背景介绍](#一、Electron 背景介绍)
- [1. 起源与发展](#1. 起源与发展)
- [2. 核心特点](#2. 核心特点)
- [3. 优势](#3. 优势)
- [4. 应用场景](#4. 应用场景)
- [5. Electron 能做什么](#5. Electron 能做什么)
[二、 Electron 架构](#二、 Electron 架构)
- [1. 主进程（Main Process）](#1. 主进程（Main Process）)
- [2. 渲染进程（Renderer Process）](#2. 渲染进程（Renderer Process）)
[三、环境搭建（Vue3 + Electron）](#三、环境搭建（Vue3 + Electron）)
- [1. 创建 Vue3 项目](#1. 创建 Vue3 项目)
- [2. 安装 Electron 依赖](#2. 安装 Electron 依赖)
- [3. 项目结构](#3. 项目结构)
[四、配置 Electron 主进程](#四、配置 Electron 主进程)
- [1. 创建 `main.js`（主进程）](#1. 创建 main.js（主进程）)
- [2. 创建 `preload.js`（预加载脚本）](#2. 创建 preload.js（预加载脚本）)
[五、配置 Vue3 与 Electron 通信](#五、配置 Vue3 与 Electron 通信)
- [1. 在 Vue3 组件中使用 IPC](#1. 在 Vue3 组件中使用 IPC)
- [2. 在 `main.js` 中处理 IPC 消息*](#2. 在 main.js 中处理 IPC 消息*)
[六、打包 Vue3 + Electron 应用**](#六、打包 Vue3 + Electron 应用**)
- [1. 修改 `package.json`](#1. 修改 package.json)
- [2. 运行 & 打包](#2. 运行 & 打包)
七、总结

前言

Electron‌

Electron = Chromium + Node.js + Native APIs

Chromium：提供强大的渲染引擎，负责显示界面。
Node.js：提供后端能力，可以访问文件系统、网络等。
Native APIs：提供操作系统级别的功能，如菜单、通知、托盘等。

一、Electron 背景介绍

Electron 是一个开源框架，由 GitHub 开发（最初为 Atom 编辑器 项目构建），允许开发者使用 Web 技术（HTML、CSS、JavaScript） 构建 跨平台桌面应用程序。

1. 起源与发展

2013年 ：最初名为 Atom Shell ，是 GitHub 为其代码编辑器 Atom 开发的底层框架。
2015年 ：更名为 Electron ，并开源，迅速被 Slack、Visual Studio Code、Discord 等知名应用采用。
2022年 ：底层升级至 Chromium 106 和 Node.js 16.16.0 ，并支持 Windows 沉浸式黑暗模式 等新特性。

2. 核心特点

Electron ，把 Chromium（浏览器内核）＋Node.js（服务器/系统能力） 包裹进一个桌面应用壳，可以用 HTML/CSS/JS 写跨平台的桌面程序（Windows、macOS、Linux）。

关键点：

前端负责界面（Renderer 进程：像浏览器标签页）。
主进程（Main）负责应用生命周期、窗口、原生 API 调用。
两者通过 IPC（进程间通信） 交互。
最终可打包成 .exe、.app、.deb 等安装文件。

✅ 跨平台 ：一套代码可运行在 Windows、macOS、Linux 上。

✅ Web 技术驱动 ：使用 HTML、CSS、JavaScript 构建 UI，无需学习 C++/Objective-C/Java。

✅ Chromium + Node.js：

Chromium 提供现代化的 Web 渲染引擎（支持最新 Web API）。
Node.js 允许访问 文件系统、网络、原生 API 等底层功能。

✅ 生态丰富：

支持 自动更新、打包安装（NSIS、DMG、AppImage）。
被 VS Code、Figma、Trello Desktop 等流行应用使用。

3. 优势

设计理念是"一次编写，到处运行"（Write Once, Run Everywhere）。开发者只需要编写一套代码，就能生成 Windows、macOS 和 Linux 三个平台的应用程序。

上手快：Web 开发者可以复用大量前端技能/组件/生态（React/Vue/Angular/TS/CSS）。
跨平台：写一次，构建三平台（虽然有系统差异需要调整）。
强大的本地能力：直接访问文件系统、进程、系统 API，而不必写本地语言绑定（绝大多数场景靠 Node.js 就够）。
生态成熟：大量现成库、模板、打包工具（Electron Builder / Forge 等）。
适合工具类应用：编辑器、通信工具、生产力软件、调试工具等。

4. 应用场景

开发工具 / 编辑器：代码编辑器、终端、调试器（如 VS Code、Postman）。
即时通信/社交：聊天客户端（如 Discord、Slack）。
跨平台桌面客户端：需要快速把 web 产品做成桌面版。
原型与内部工具：公司内部运营工具、数据面板、管理台。
对 UI/交互要求高但不极端性能敏感的应用。

不适合的场景：对 CPU/GPU/内存极度敏感、需要极致原生体验或移动端优先的项目（如大型图形渲染、超低延迟游戏）。

5. Electron 能做什么

打开窗口、菜单、系统托盘、通知（系统通知）。
读写文件、操作本地数据库（SQLite、LevelDB 等）。
调用本机命令/二进制、启动子进程。
使用原生对话框（打开/保存文件）、剪贴板、拖拽、全局快捷键。
实现自动更新（auto-update）、热重载、打包分发。
加载本地或远程网页，支持现代 Web 技术（WebGL、WebRTC 等）。
集成原生模块（C++/Node Native Addons），接入硬件或系统功能。

二、 Electron 架构

Main 进程：Electron 的入口，负责创建 BrowserWindow、管理应用生命周期与原生 API。运行单实例（Node 可用）。
Renderer 进程：每个 BrowserWindow 对应一个 renderer，运行网页（Chromium），不直接访问 Node（可通过 preload 暴露受限 API）。
Preload 脚本 & contextIsolation：推荐用 preload 在 renderer 中注入受限 API，开启 contextIsolation 提高安全性。
IPC（ipcMain / ipcRenderer / contextBridge）：主、渲染进程通信机制。
打包工具：Electron Builder / Electron Forge / electron-packager 等，用于生成安装包与自动更新。
Auto-updater：实现应用自动升级（需服务端/发布配置）。

下面详细介绍组成Electron 应用的两个核心进程：

1. 主进程（Main Process）

作用：控制应用生命周期（启动、退出）、创建窗口、管理原生功能（菜单、对话框）。
运行环境：Node.js + Electron API。
关键模块：
app（控制应用事件）
BrowserWindow（创建窗口）
dialog（文件/消息对话框）
ipcMain（与渲染进程通信）

2. 渲染进程（Renderer Process）

作用 ：负责 UI 渲染（HTML/CSS/JS），类似浏览器标签页。
运行环境：Chromium（支持 Web 技术） + 可选 Node.js（需配置）。
关键模块：
ipcRenderer（与主进程通信）
fetch / XMLHttpRequest（网络请求）

🔗 进程通信（IPC） ：

主进程和渲染进程通过 ipcMain 和 ipcRenderer 进行数据交换。

安全注意事项（很重要）

永远不要在 renderer 中直接开启 NodeIntegration（nodeIntegration: true），默认关闭以防 XSS 导致任意系统命令执行。

使用 contextIsolation + preload + contextBridge 暴露最小、受控的 API。

对外部内容（远程 URL）进行严格校验 / 沙箱处理。

对文件路径、shell 命令等输入做严格校验，避免命令注入。

尽量使用 CSP、禁用 eval、避免不受信任的第三方脚本。

三、环境搭建（Vue3 + Electron）

1. 创建 Vue3 项目

js 复制代码

# 使用 Vite 创建 Vue3 项目
npm create vite@latest my-vue-electron-app -- --template vue
cd my-vue-electron-app
npm install

2. 安装 Electron 依赖

js 复制代码

# 安装 Electron（开发依赖）
npm install electron --save-dev
 
# 安装 electron-builder（打包工具）
npm install electron-builder --save-dev

3. 项目结构

bash 复制代码

my-vue-electron-app/
├── package.json
├── vite.config.js
├── src/          # Vue3 前端代码
├── main.js       # Electron 主进程
├── preload.js    # 预加载脚本（安全 IPC 通信）
└── index.html    # Electron 渲染进程入口（可选）

四、配置 Electron 主进程

1. 创建 `main.js`（主进程）

在项目根目录创建 main.js，用于控制 Electron 窗口和 Vue3 应用：

js 复制代码

const { app, BrowserWindow } = require('electron');
const path = require('path');
 
function createWindow() {
  const win = new BrowserWindow({
    width: 1200,
    height: 800,
    webPreferences: {
      nodeIntegration: false, // 禁用 Node.js 集成（安全考虑）
      contextIsolation: true, // 启用上下文隔离
      preload: path.join(__dirname, 'preload.js'), // 预加载脚本
    },
  });
 
  // 开发环境加载 Vite 开发服务器
  if (process.env.NODE_ENV === 'development') {
    win.loadURL('http://localhost:5173');
    win.webContents.openDevTools(); // 打开 DevTools（可选）
  } else {
    // 生产环境加载打包后的 Vue3 应用
    win.loadFile(path.join(__dirname, '../dist/index.html'));
  }
}
 
// Electron 初始化完成后创建窗口
app.whenReady().then(createWindow);
 
// 所有窗口关闭时退出应用（macOS 除外）
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit();
});
 
// macOS 点击 Dock 图标时重新创建窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

2. 创建 `preload.js`（预加载脚本）

用于安全地暴露 IPC 通信 API 给 Vue3 渲染进程：

js 复制代码

const { contextBridge, ipcRenderer } = require('electron');
 
contextBridge.exposeInMainWorld('electronAPI', {
  // 示例：发送消息到主进程
  sendMessage: (message) => ipcRenderer.send('message-from-vue', message),
  // 示例：接收主进程消息
  onMessage: (callback) => ipcRenderer.on('message-from-main', (event, data) => callback(data)),
});

五、配置 Vue3 与 Electron 通信

1. 在 Vue3 组件中使用 IPC

在 Vue3 组件（如 src/App.vue）中调用 Electron API：

js 复制代码

<template>
  <div>
    <h1>Vue3 + Electron 桌面应用</h1>
    <button @click="sendMessageToElectron">发送消息给 Electron</button>
    <div v-if="messageFromElectron">
      <p>来自 Electron 的消息: {{ messageFromElectron }}</p>
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const messageFromElectron = ref('');
 
// 发送消息到 Electron 主进程
const sendMessageToElectron = () => {
  window.electronAPI.sendMessage('Hello from Vue3!');
};
 
// 接收来自 Electron 的消息
onMounted(() => {
  window.electronAPI.onMessage((data) => {
    messageFromElectron.value = data;
  });
});
</script>

2. 在 `main.js` 中处理 IPC 消息*

修改 main.js，让 Electron 主进程接收并回复 Vue3 的消息：

js 复制代码

const { ipcMain } = require('electron');
 
// 监听来自 Vue3 的消息
ipcMain.on('message-from-vue', (event, message) => {
  console.log('来自 Vue3 的消息:', message);
  // 回复消息给 Vue3
  event.sender.send('message-from-main', 'Electron 收到你的消息了！');
});

六、打包 Vue3 + Electron 应用**

1. 修改 `package.json`

js 复制代码

{
  "name": "my-vue-electron-app",
  "version": "1.0.0",
  "main": "main.js", // Electron 主进程入口
  "scripts": {
    "dev": "vite", // 启动 Vue3 开发服务器
    "build": "vite build", // 打包 Vue3 前端
    "electron:dev": "concurrently \"npm run dev\" \"wait-on http://localhost:5173 && electron .\"", // 开发模式（Vue3 + Electron）
    "electron:build": "npm run build && electron-builder" // 打包生产版本
  },
  "devDependencies": {
    "electron": "^28.0.0",
    "electron-builder": "^24.0.0",
    "concurrently": "^8.0.0",
    "wait-on": "^7.0.0"
  },
  "build": {
    "appId": "com.example.vue-electron",
    "productName": "Vue3 Electron App",
    "win": { "target": "nsis" }, // Windows 安装包
    "mac": { "target": "dmg" },   // macOS 安装包
    "linux": { "target": "AppImage" } // Linux 安装包
  }
}

2. 运行 & 打包

（1）开发模式（Vue3 + Electron 同时运行）

shell 复制代码

npm run electron:dev

（2）打包生产版本

shell 复制代码

npm run electron:build

✅ 输出 ：dist/ 文件夹包含 Windows .exe、macOS .dmg、Linux .AppImage 安装包。

七、总结

步骤	说明
1. 背景	Electron = Web 技术（Vue3） + 桌面应用（Chromium + Node.js）
2. 架构	主进程（管理窗口） + 渲染进程（Vue3 UI）
3. 环境	npm install electron electron-builder
4. 主进程	main.js 控制窗口，preload.js 安全 IPC
5. Vue3 通信	window.electronAPI 调用 Electron API
6. 打包	electron-builder 生成 .exe / .dmg / .AppImage

提示：

开发时 ：用 electron:dev 同时运行 Vue3 和 Electron。
生产时 ：用 electron:build 打包成安装包。
安全 ：禁用 nodeIntegration，使用 preload.js + contextBridge。用 preload.js + contextBridge。

本文的引用仅限自我学习如有侵权，请联系作者删除。
参考知识
Electron 教程：从背景到 Vue3 桌面应用开发
菜鸟教程-Electron 简介

24. 前端-js框架-Electron

文章目录

前言

一、Electron 背景介绍​

​​1. 起源与发展​

2. 核心特点​

3. 优势

4. 应用场景

5. Electron 能做什么

二、 Electron 架构​

​​1. 主进程（Main Process）​

​​2. 渲染进程（Renderer Process）​

三、环境搭建（Vue3 + Electron）​

​​1. 创建 Vue3 项目​

​​2. 安装 Electron 依赖​

​​3. 项目结构​

四、配置 Electron 主进程​

​​1. 创建 main.js（主进程）​

​​2. 创建 preload.js（预加载脚本）​

五、配置 Vue3 与 Electron 通信​

​1. 在 Vue3 组件中使用 IPC​

2. 在 main.js 中处理 IPC 消息​*

六、打包 Vue3 + Electron 应用​**​

​​1. 修改 package.json

2. 运行 & 打包​

七、总结​

一、Electron 背景介绍

1. 起源与发展

2. 核心特点

二、 Electron 架构

1. 主进程（Main Process）

2. 渲染进程（Renderer Process）

三、环境搭建（Vue3 + Electron）

1. 创建 Vue3 项目

2. 安装 Electron 依赖

3. 项目结构

四、配置 Electron 主进程

1. 创建 `main.js`（主进程）

2. 创建 `preload.js`（预加载脚本）

五、配置 Vue3 与 Electron 通信

1. 在 Vue3 组件中使用 IPC

2. 在 `main.js` 中处理 IPC 消息*

六、打包 Vue3 + Electron 应用**

1. 修改 `package.json`

2. 运行 & 打包

七、总结