企业官网建设流程全解析

1. Electron+Vue项目打包EXE文件实战指南

去年接手一个医院挂号系统的桌面端开发需求时，我首次将Vue项目通过Electron打包成EXE文件。当时踩了不少坑，比如打包后程序启动要20多秒、安装包体积高达200MB。经过半年多的项目实战，现在我们的Electron应用打包后启动时间控制在3秒内，安装包精简到80MB左右。下面分享从零开始的完整打包方案，包含我总结的7个性能优化技巧。

2. 环境准备与项目初始化

2.1 基础环境配置

推荐使用Node 16.x LTS版本（当前18.x存在electron-builder兼容性问题）：

node -v # 确认版本 npm install -g yarn # 推荐使用yarn

重要提示：Windows系统需要提前安装NSIS（打包工具依赖），建议下载3.08版本。安装时勾选"Compressor plugins"选项，这是压缩安装包的关键组件。

2.2 项目创建最佳实践

使用官方推荐的electron-vue脚手架：

vue init simulatedgreg/electron-vue my-project

初始化时特别注意以下选项配置：

• 选择vue-router（桌面应用也需要路由管理）
• 启用vuex（状态管理必备）
• 关闭ESLint（开发阶段可临时关闭加速调试）
• 选择electron-packager作为基础打包工具

3. 打包配置深度优化

3.1 electron-builder核心配置

在package.json中添加build配置块：

"build": { "appId": "com.example.medical", "productName": "智能挂号系统", "directories": { "output": "dist_electron" }, "files": [ "dist/**/*", "node_modules/**/*", "package.json" ], "win": { "target": "nsis", "icon": "build/icons/icon.ico", "requestedExecutionLevel": "requireAdministrator" }, "nsis": { "oneClick": false, "perMachine": true, "allowElevation": true, "allowToChangeInstallationDirectory": true, "installerIcon": "build/icons/installer.ico", "uninstallerIcon": "build/icons/uninstaller.ico", "createDesktopShortcut": true, "createStartMenuShortcut": true } }

3.2 图标处理技巧

Windows平台需要多尺寸ICO文件（推荐256x256px），使用在线工具生成包含以下尺寸的图标：

• 16x16
• 32x32
• 48x48
• 64x64
• 128x128
• 256x256

存放路径建议：

build/ icons/ icon.ico installer.ico uninstaller.ico

4. 打包流程与性能优化

4.1 完整打包命令

分阶段执行保证稳定性：

# 1. 构建web端资源 npm run build # 2. 添加electron-builder环境变量 set NODE_ENV=production # 3. 执行打包（添加参数禁用asar归档） yarn electron-builder --win --x64 --config.asar=false

4.2 体积压缩实战方案

通过实测有效的优化手段：

5. 常见问题解决方案

5.1 启动白屏问题

典型错误现象：程序启动后显示空白窗口超过5秒

解决方案：

1. 在主进程(index.js)中添加就绪事件监听：

win.on('ready-to-show', () => { win.show() win.focus() })

2. 在vue.config.js中配置预加载：

pluginOptions: { electronBuilder: { preload: 'src/preload.js', nodeIntegration: true } }

5.2 打包速度优化

实测有效的加速方案：

1. 使用淘宝镜像：

npm config set electron_mirror https://npm.taobao.org/mirrors/electron/

2. 缓存Electron二进制文件：

set ELECTRON_CACHE=%USERPROFILE%\.electron

3. 并行构建配置（需8GB+内存）：

"build": { "extraMetadata": { "parallel": true } }

6. 进阶功能实现

6.1 自动更新机制

推荐使用electron-updater实现：

1. 主进程配置：

const { autoUpdater } = require('electron-updater') autoUpdater.autoDownload = true autoUpdater.autoInstallOnAppQuit = true autoUpdater.on('update-available', () => { mainWindow.webContents.send('update_available') })

2. 渲染进程监听：

ipcRenderer.on('update_available', () => { showUpdateModal() })

6.2 签名与公证

Windows平台签名步骤：

1. 购买代码签名证书（推荐DigiCert）
2. 配置build：

"win": { "certificateFile": "path/to/cert.pfx", "certificatePassword": "yourpassword", "signingHashAlgorithms": ["sha256"] }

7. 项目实战经验

在医疗项目中发现的关键技巧：

1. 内存管理：Electron应用默认内存限制较低，对于数据量大的应用需调整：

app.commandLine.appendSwitch('js-flags', '--max-old-space-size=4096')

2. 多窗口通信：挂号系统需要多个窗口协同工作，推荐使用：

// 主窗口 const child = new BrowserWindow({ parent: mainWindow }) child.loadURL('child.html') // 子窗口 ipcRenderer.sendToHost('data', payload)

3. 本地数据库集成：SQLite是Electron最佳搭档，推荐使用better-sqlite3：

npm install better-sqlite3 --save

打包过程中遇到的典型报错及解决方案：

最后分享一个真实案例：某三甲医院的叫号系统通过上述优化方案，打包体积从210MB降至87MB，启动时间从18秒缩短到2.3秒。关键优化点是移除了不必要的node_modules（通过webpack-bundle-analyzer分析）和启用7z极限压缩。