【高频考点精讲】Electron桌面应用开发：从打包到自动更新的完整方案

最新推荐文章于 2025-06-30 00:15:06 发布

原创

最新推荐文章于 2025-06-30 00:15:06 发布 · 968 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html #css #面试题 #react #vue

Electron桌面应用开发：从打包到自动更新的完整方案

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 6 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

大家好，我是全栈老李。今天咱们聊聊Electron——这个让前端工程师也能轻松开发跨平台桌面应用的神器。很多同学可能用过Electron打包应用，但真正上线后怎么让用户无感自动更新？怎么处理不同平台的签名问题？今天我就带大家走完从打包到自动更新的完整链路，全是实战干货，建议先收藏再细看。

为什么Electron应用需要特殊处理？

Electron本质是Chromium + Node.js的套壳浏览器，但用户期望它像原生应用一样：

安装包不能是几百MB的文件夹（直接asar打包会被杀毒软件误报）
要有应用图标、开始菜单项（Windows）或Dock栏图标（Mac）
版本更新不能让用户重新下载安装包

这就引出了今天三大核心问题：打包优化、代码签名、自动更新。

实战：从零构建可更新的Electron应用

1. 基础项目结构

your-app/
├── main.js          # 主进程代码
├── package.json
├── src/             # 前端代码
└── builder-config/  # 各平台打包配置

关键package.json配置（全栈老李提示：注意build字段）：

{
   
   
  "name": "your-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
   
   
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "build": {
   
   
    "appId": "com.yourcompany.yourapp",
    "productName": "你的应用",
    "copyright": "Copyright © 2023 全栈老李",
    "mac": {
   
   
      "category": "public.app-category.developer-tools"