381 lines
8.1 KiB
Markdown
381 lines
8.1 KiB
Markdown
# 🚀 Vue项目打包成exe方案对比
|
||
|
||
## 📋 方案总览
|
||
|
||
| 方案 | 难度 | 体积 | 优点 | 缺点 | 推荐度 |
|
||
|-----|------|------|------|------|--------|
|
||
| **Electron** | ⭐⭐⭐ | 大（~150MB） | 成熟稳定、功能完整 | 体积大 | ⭐⭐⭐⭐⭐ |
|
||
| **Tauri** | ⭐⭐⭐⭐ | 小（~10MB） | 轻量、快速、安全 | 较新、生态小 | ⭐⭐⭐⭐ |
|
||
| **静态服务器** | ⭐⭐ | 中（~50MB） | 简单快速 | 需要浏览器 | ⭐⭐⭐ |
|
||
|
||
---
|
||
|
||
## 🏆 方案1：Electron（最推荐）
|
||
|
||
### 优点
|
||
✅ 成熟稳定，被VSCode、Discord等大型应用使用
|
||
✅ 完全独立运行，无需浏览器
|
||
✅ 可以访问本地文件系统和系统API
|
||
✅ 跨平台（Windows、Mac、Linux）
|
||
✅ 丰富的插件和工具支持
|
||
✅ 可以打包成单个exe安装包
|
||
|
||
### 缺点
|
||
❌ 打包后体积较大（~150-200MB）
|
||
❌ 内存占用相对较高
|
||
❌ 启动速度稍慢
|
||
|
||
### 适用场景
|
||
- ✅ 需要独立桌面应用
|
||
- ✅ 需要访问本地文件系统
|
||
- ✅ 用户不介意文件体积
|
||
- ✅ 需要系统托盘、快捷键等桌面特性
|
||
|
||
### 实施步骤
|
||
|
||
#### 1. 安装依赖
|
||
```bash
|
||
# 安装Electron相关依赖
|
||
npm install --save-dev electron electron-builder
|
||
npm install --save-dev @electron/remote
|
||
```
|
||
|
||
#### 2. 创建Electron主进程文件
|
||
创建 `electron/main.js`：
|
||
```javascript
|
||
const { app, BrowserWindow } = require('electron')
|
||
const path = require('path')
|
||
|
||
function createWindow() {
|
||
const win = new BrowserWindow({
|
||
width: 1400,
|
||
height: 900,
|
||
webPreferences: {
|
||
nodeIntegration: false,
|
||
contextIsolation: true,
|
||
preload: path.join(__dirname, 'preload.js')
|
||
},
|
||
icon: path.join(__dirname, '../public/favicon.ico')
|
||
})
|
||
|
||
// 开发环境加载开发服务器，生产环境加载打包后的文件
|
||
if (process.env.NODE_ENV === 'development') {
|
||
win.loadURL('http://localhost:3001')
|
||
win.webContents.openDevTools()
|
||
} else {
|
||
win.loadFile(path.join(__dirname, '../dist/index.html'))
|
||
}
|
||
}
|
||
|
||
app.whenReady().then(createWindow)
|
||
|
||
app.on('window-all-closed', () => {
|
||
if (process.platform !== 'darwin') {
|
||
app.quit()
|
||
}
|
||
})
|
||
|
||
app.on('activate', () => {
|
||
if (BrowserWindow.getAllWindows().length === 0) {
|
||
createWindow()
|
||
}
|
||
})
|
||
```
|
||
|
||
#### 3. 修改 package.json
|
||
```json
|
||
{
|
||
"name": "xyzw-game-helper",
|
||
"version": "3.13.5.6",
|
||
"main": "electron/main.js",
|
||
"scripts": {
|
||
"dev": "vite",
|
||
"build": "vite build",
|
||
"electron:dev": "electron .",
|
||
"electron:build": "vite build && electron-builder",
|
||
"electron:build:win": "vite build && electron-builder --win --x64"
|
||
},
|
||
"build": {
|
||
"appId": "com.xyzw.game-helper",
|
||
"productName": "XYZW游戏助手",
|
||
"directories": {
|
||
"output": "release"
|
||
},
|
||
"files": [
|
||
"dist/**/*",
|
||
"electron/**/*"
|
||
],
|
||
"win": {
|
||
"target": ["nsis", "portable"],
|
||
"icon": "public/favicon.ico"
|
||
},
|
||
"nsis": {
|
||
"oneClick": false,
|
||
"allowToChangeInstallationDirectory": true,
|
||
"createDesktopShortcut": true,
|
||
"createStartMenuShortcut": true
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 4. 打包命令
|
||
```bash
|
||
# 开发测试
|
||
npm run electron:dev
|
||
|
||
# 打包为Windows exe
|
||
npm run electron:build:win
|
||
```
|
||
|
||
#### 5. 输出文件
|
||
打包完成后，在 `release` 目录会生成：
|
||
- `XYZW游戏助手 Setup 3.13.5.6.exe` - 安装包
|
||
- `XYZW游戏助手 3.13.5.6.exe` - 绿色免安装版
|
||
|
||
---
|
||
|
||
## 🦀 方案2：Tauri（轻量级推荐）
|
||
|
||
### 优点
|
||
✅ 体积超小（~10-15MB）
|
||
✅ 启动速度快
|
||
✅ 内存占用低
|
||
✅ 使用系统WebView，不打包浏览器
|
||
✅ Rust编写，更安全
|
||
✅ 跨平台
|
||
|
||
### 缺点
|
||
❌ 相对较新（2022年稳定）
|
||
❌ 生态系统较小
|
||
❌ 需要安装Rust环境
|
||
❌ 文档相对较少
|
||
|
||
### 适用场景
|
||
- ✅ 对文件体积敏感
|
||
- ✅ 需要高性能
|
||
- ✅ 愿意尝试新技术
|
||
|
||
### 实施步骤
|
||
|
||
#### 1. 安装Rust和Tauri CLI
|
||
```bash
|
||
# 安装Rust（访问 https://rustup.rs/）
|
||
# Windows: 下载并运行 rustup-init.exe
|
||
|
||
# 安装Tauri CLI
|
||
npm install --save-dev @tauri-apps/cli
|
||
```
|
||
|
||
#### 2. 初始化Tauri项目
|
||
```bash
|
||
npm run tauri init
|
||
```
|
||
|
||
#### 3. 配置 tauri.conf.json
|
||
```json
|
||
{
|
||
"build": {
|
||
"distDir": "../dist",
|
||
"devPath": "http://localhost:3001",
|
||
"beforeDevCommand": "npm run dev",
|
||
"beforeBuildCommand": "npm run build"
|
||
},
|
||
"package": {
|
||
"productName": "XYZW游戏助手",
|
||
"version": "3.13.5.6"
|
||
},
|
||
"tauri": {
|
||
"windows": [
|
||
{
|
||
"width": 1400,
|
||
"height": 900,
|
||
"title": "XYZW游戏助手"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 4. 打包命令
|
||
```bash
|
||
# 开发测试
|
||
npm run tauri dev
|
||
|
||
# 打包
|
||
npm run tauri build
|
||
```
|
||
|
||
---
|
||
|
||
## 📦 方案3：静态服务器打包（最简单）
|
||
|
||
### 优点
|
||
✅ 实施最简单快速
|
||
✅ 体积适中（~50MB）
|
||
✅ 无需学习新框架
|
||
✅ 可以快速迭代
|
||
|
||
### 缺点
|
||
❌ 需要浏览器才能使用
|
||
❌ 无法访问系统API
|
||
❌ 用户体验略差（看到浏览器地址栏）
|
||
❌ 不是真正的桌面应用
|
||
|
||
### 适用场景
|
||
- ✅ 快速原型验证
|
||
- ✅ 不想学习Electron/Tauri
|
||
- ✅ 用户已安装浏览器
|
||
|
||
### 实施步骤
|
||
|
||
#### 1. 创建启动脚本
|
||
创建 `server.js`：
|
||
```javascript
|
||
const express = require('express')
|
||
const path = require('path')
|
||
const { exec } = require('child_process')
|
||
|
||
const app = express()
|
||
const PORT = 3001
|
||
|
||
// 静态文件服务
|
||
app.use(express.static(path.join(__dirname, 'dist')))
|
||
|
||
// 所有路由返回index.html（支持Vue Router）
|
||
app.get('*', (req, res) => {
|
||
res.sendFile(path.join(__dirname, 'dist', 'index.html'))
|
||
})
|
||
|
||
app.listen(PORT, () => {
|
||
console.log(`🚀 服务器运行在 http://localhost:${PORT}`)
|
||
|
||
// 自动打开浏览器
|
||
const url = `http://localhost:${PORT}`
|
||
const platform = process.platform
|
||
const command = platform === 'win32' ? 'start' :
|
||
platform === 'darwin' ? 'open' : 'xdg-open'
|
||
|
||
exec(`${command} ${url}`)
|
||
})
|
||
```
|
||
|
||
#### 2. 安装依赖
|
||
```bash
|
||
npm install express
|
||
npm install --save-dev pkg
|
||
```
|
||
|
||
#### 3. 修改 package.json
|
||
```json
|
||
{
|
||
"scripts": {
|
||
"build": "vite build",
|
||
"package": "npm run build && pkg server.js -t node18-win-x64 -o release/XYZW游戏助手.exe"
|
||
},
|
||
"pkg": {
|
||
"assets": ["dist/**/*"]
|
||
}
|
||
}
|
||
```
|
||
|
||
#### 4. 打包命令
|
||
```bash
|
||
npm run package
|
||
```
|
||
|
||
---
|
||
|
||
## 🎯 方案选择建议
|
||
|
||
### 推荐：Electron（最全面）
|
||
|
||
适合你的项目，因为：
|
||
1. ✅ 项目需要WebSocket连接（Electron支持完善）
|
||
2. ✅ 需要本地存储（IndexedDB、localStorage完全支持）
|
||
3. ✅ 可能需要后续扩展（如本地文件读写、系统托盘）
|
||
4. ✅ 用户体验最好（真正的桌面应用）
|
||
|
||
### 如果体积敏感：Tauri
|
||
|
||
如果：
|
||
- 用户对安装包大小敏感
|
||
- 愿意投入时间学习Rust
|
||
- 追求极致性能
|
||
|
||
### 如果快速上线：静态服务器
|
||
|
||
如果：
|
||
- 需要快速验证
|
||
- 不需要桌面特性
|
||
- 用户可以接受浏览器界面
|
||
|
||
---
|
||
|
||
## 📊 实际对比
|
||
|
||
### 打包体积对比
|
||
```
|
||
静态服务器: ~50MB
|
||
Tauri: ~12MB
|
||
Electron: ~180MB
|
||
```
|
||
|
||
### 启动速度对比
|
||
```
|
||
静态服务器: ~1秒（+浏览器启动）
|
||
Tauri: ~0.5秒
|
||
Electron: ~2秒
|
||
```
|
||
|
||
### 内存占用对比
|
||
```
|
||
静态服务器: ~100MB（+浏览器）
|
||
Tauri: ~80MB
|
||
Electron: ~150MB
|
||
```
|
||
|
||
---
|
||
|
||
## 🛠️ 具体实施建议
|
||
|
||
### 第一步：选择方案
|
||
我推荐**Electron**，原因：
|
||
1. 你的项目功能复杂（WebSocket、批量任务、本地存储）
|
||
2. Electron对这些功能支持最完善
|
||
3. 体积大小对于桌面应用是可以接受的（VSCode、Discord都是180MB+）
|
||
|
||
### 第二步：我可以帮你实施
|
||
我可以帮你：
|
||
1. 创建完整的Electron配置文件
|
||
2. 修改项目结构以支持Electron
|
||
3. 配置打包脚本
|
||
4. 测试打包流程
|
||
5. 生成最终的exe文件
|
||
|
||
### 第三步：分发给用户
|
||
打包完成后，用户只需：
|
||
1. 下载exe文件
|
||
2. 双击安装或直接运行（绿色版）
|
||
3. 无需任何配置，直接使用
|
||
|
||
---
|
||
|
||
## ❓ 需要我帮你实施吗？
|
||
|
||
我可以立即帮你：
|
||
1. ✅ 创建Electron配置文件
|
||
2. ✅ 修改项目结构
|
||
3. ✅ 添加打包脚本
|
||
4. ✅ 配置图标和应用信息
|
||
5. ✅ 生成可分发的exe文件
|
||
|
||
只需要告诉我你选择哪个方案，我马上开始！
|
||
|
||
---
|
||
|
||
**推荐方案**：Electron
|
||
**预计工作量**：30-60分钟
|
||
**最终产物**：单个exe安装包，用户双击即可使用
|
||
|