今天遇到一个以前的前端同事 他突然微信问我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. 打包静态文件
npm run build- 这会生成dist文件夹，就像给你的Vue项目做了个全身SPA！
- 创建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的「大脑」，指挥着浏览器窗口怎么干活
- 修改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. 版本兼容性
Electron和Node.js版本要像情侣一样般配，建议用nvm管理Node版本 - 2. 安全警告
生产环境务必设置contextIsolation: true，别学我瞎搞（参考） - 3. 内存泄漏
打包后内存占用飙升？试试--asar压缩（参考）
当你双击生成的.exe文件，看到自己写的Vue项目在桌面活蹦乱跳时——那种成就感，就像亲手造出了会动的乐高！
记住，每个报错都是编译器在和你玩捉迷藏，只要耐心排查，终能修成正果！