还有前端不知道Electron的?手把手教你把Vue项目打包成桌面程序

今天遇到一个以前的前端同事 他突然微信问我winform 怎么写？

我当时一脸懵 问他你不是前端开发么怎么研究winform了？

他说公司要他做一个桌面程序，他说他不会，我说你干前端这么久了没听说过Electron么？

经过我一顿安利后，他总算打包成功了第一个版本，我就想在这也记录一下 Electron 怎么打包现有Vue项目吧

一、环境准备：先给电脑洗洗脚

# 安装Node.js（建议v16.20.2）
# 国内镜像配置（否则下载依赖要等到地老天荒）
npm config set registry https://registry.npmmirror.com

# 安装Electron（版本22.3.7）
npm install electron --save-dev

温馨提示：这一步要是卡成PPT，赶紧检查网络！建议直接下载Electron镜像包塞进缓存目录（路径：C:\Users\你的用户名\AppData\Local\electron\Cache）

二、Vue项目改造：给网页穿上盔甲

1. 1. 打包静态文件

npm run build

2. 这会生成dist文件夹，就像给你的Vue项目做了个全身SPA！
3. 创建Electron的「说明书」main.js

const { app, BrowserWindow } = require('electron')
let win = null

function createWindow() {
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,  // 允许Node.js混入
      contextIsolation: false // 关闭安全隔离（开发阶段可开）
    }
  })
  win.loadFile('dist/index.html')  // 加载打包后的Vue
  win.webContents.openDevTools()  // 开发者工具随时待命
}

app.whenReady().then(createWindow)

这文件就像Electron的「大脑」，指挥着浏览器窗口怎么干活

4. 修改package.json

{
  "main": "main.js",
  "scripts": {
    "electron": "electron .",
    "build": "vue-cli-service build"
  }
}

重点：添加"electron": "electron ."，以后只要npm run electron就能启动

三、打包实战：和Electron斗智斗勇

步骤1：启动内置服务器

npm install express --save-dev

新建server.js：

const express = require('express')
const app = express()
app.use(express.static('dist'))
app.listen(3000, () => console.log('Server running on port 3000'))

修改main.js加载本地服务器：

win.loadURL('http://localhost:3000')

步骤2：安装打包神器electron-builder

npm install electron-builder --save-dev

配置package.json：

{
  "build": {
    "appId": "com.yourcompany.app",
    "productName": "我的神级应用",
    "directories": {"output": "dist_electron"}
  }
}

步骤3：执行打包命令

npm run build && electron-builder

常见翻车现场：
o 下载Electron失败：手动下载对应版本放到缓存目录（参考）

o 打包白屏：Vue路由模式要改成hash模式（参考）

o 缺少依赖包：手动下载winCodeSign等文件（参考）

四、进阶玩法：给应用加点料

自定义图标
在package.json添加：

"build": {
  "win": {"icon": "public/icon.ico"}
}

打包成安装包

electron-builder --win --x64

生成dist_electron文件夹，里面就是安装包啦！

跨平台打包

# 打Mac包
electron-builder --mac
# 打Linux包
electron-builder --linux

五、血泪经验大放送

1. 1. 版本兼容性
   Electron和Node.js版本要像情侣一样般配，建议用nvm管理Node版本
2. 2. 安全警告
   生产环境务必设置contextIsolation: true，别学我瞎搞（参考）
3. 3. 内存泄漏
   打包后内存占用飙升？试试--asar压缩（参考）

当你双击生成的.exe文件，看到自己写的Vue项目在桌面活蹦乱跳时——那种成就感，就像亲手造出了会动的乐高！

记住，每个报错都是编译器在和你玩捉迷藏，只要耐心排查，终能修成正果！