Electron快速构建跨平台应用快速入门（含 Vue + TypeScript 示例）

借助 Electron + Vue + TypeScript，只需用一套代码，就能打包生成 Windows、macOS、Linux 的桌面应用程序。本文将完整演示从创建项目到构建全平台安装包的全过程。

---

🧰 一、开发环境准备

• Node.js（推荐 LTS 版本）
• npm/yarn/pnpm（任选一个）
• macOS / Windows / Linux 任意操作系统

安装 Node.js 后，验证：

node -v
npm -v

---

📦 二、创建 Vue + TypeScript 项目

使用 Vite 快速创建 Vue 项目：

npm create vite@latest my-electron-app -- --template vue-ts
cd my-electron-app
npm install

---

🧠 三、集成 Electron

安装 Electron

npm install electron --save-dev

新建 Electron 主进程文件

新建目录 electron/，创建 main.ts：

// electron/main.ts
import { app, BrowserWindow } from 'electron'
import { join } from 'path'

// 创建窗口函数
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 预加载脚本，可用于暴露安全 API 给页面
      preload: join(__dirname, 'preload.js'),
      contextIsolation: true // 安全隔离上下文
    }
  })

  // 开发阶段加载本地 Vite 服务
  const devUrl = 'http://localhost:5173'
  win.loadURL(devUrl)
}

// Electron 初始化完成后创建窗口
app.whenReady().then(() => {
  createWindow()

  // macOS 下点击 Dock 图标时重建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

---

🔧 四、配置启动脚本

安装并使用 concurrently 同时运行前端和 Electron

npm install concurrently --save-dev

修改 package.json 脚本

{
  "main": "dist-electron/main.js",
  "scripts": {
    "dev": "vite",
    "electron": "tsc electron/main.ts --outDir dist-electron && electron dist-electron/main.js",
    "dev:electron": "concurrently \"npm run dev\" \"npm run electron\""
  }
}

---

💻 五、开发界面

修改 src/App.vue 内容：

<template>
  <div class="container">
    <h1>Hello Electron + Vue + TypeScript!</h1>
    <p>这是一个跨平台桌面应用</p>
  </div>
</template>

<style scoped>
.container {
  text-align: center;
  margin-top: 100px;
}
</style>

运行开发模式：

npm run dev:electron

你将看到一个 Electron 应用窗口，加载了你写的 Vue 页面。

---

🧱 六、打包构建全平台桌面应用

安装 electron-builder

npm install electron-builder --save-dev

配置打包项

在 package.json 中添加 build 字段：

{
  "build": {
    "appId": "com.example.myapp",
    "productName": "MyElectronApp",  // 应用名称
    "files": [
      "dist",             // Vite 构建产物
      "dist-electron",    // Electron 主进程编译产物
      "node_modules"
    ],
    "directories": {
      "buildResources": "assets"  // 可放置图标、安装器资源
    },
    "win": {
      "target": "nsis",    // Windows 安装包格式（nsis 可生成 .exe 安装器）
      "icon": "assets/icon.ico"
    },
    "mac": {
      "target": "dmg",     // macOS 使用 .dmg 安装包
      "icon": "assets/icon.icns"
    },
    "linux": {
      "target": "AppImage", // Linux 使用 AppImage 格式，兼容性好
      "icon": "assets/icon.png"
    }
  }
}

添加构建脚本

"scripts": {
  "build": "vite build && tsc electron/main.ts --outDir dist-electron",
  "build:win": "npm run build && electron-builder --win",
  "build:mac": "npm run build && electron-builder --mac",
  "build:linux": "npm run build && electron-builder --linux",
  "build:all": "npm run build && electron-builder -mwl"
}

---

📤 七、跨平台构建注意事项

✅ Windows

• 构建格式：.exe 安装程序（NSIS）
• 支持自动安装和卸载
• 可在 macOS 上打包（需安装 wine）

✅ macOS

• 构建格式：.dmg 安装包
• 只能在 macOS 上构建
• 如果打包失败，可检查 Xcode Command Line Tools 是否安装

xcode-select --install

✅ Linux

• 构建格式：.AppImage 或 .deb
• 推荐在 Ubuntu 上构建，兼容性好
• 如果要打包 .deb，只需将 target 改为 deb

---

🏁 八、构建示例命令

打包当前平台：

npm run build:win    # Windows
npm run build:mac    # macOS
npm run build:linux  # Linux

一次性打包全部平台（需跨平台工具链）：

npm run build:all

💡 推荐使用 CI/CD 工具（如 GitHub Actions）做跨平台构建。

---

✅ 九、构建完成后产物

成功打包后，生成的文件位置如下：

平台	构建产物目录	文件说明
Windows	dist/win-unpacked/, *.exe	安装程序和可执行文件
macOS	dist/mac/, *.dmg	拖拽式安装包
Linux	dist/linux-unpacked/, *.AppImage	通用安装文件

---

📌 十、总结

本文完整演示了使用 Electron + Vue + TypeScript 构建桌面应用的流程：

• ✅ 使用 Vite 初始化前端项目
• ✅ 编写 Electron 主进程代码
• ✅ 在开发环境中调试
• ✅ 使用 electron-builder 打包跨平台应用

🚀 你只需掌握 Web 技术，就能开发全平台桌面软件！