108 lines
2.4 KiB
Markdown
108 lines
2.4 KiB
Markdown
|
# Electron 桌面应用配置说明
|
|||
|
|
|
|||
|
|
本项目已配置为支持 Electron 桌面应用，可以将 Vue.js 应用打包成跨平台的桌面应用。
|
|||
|
|
|
|||
|
|
## 已安装的依赖
|
|||
|
|
|
|||
|
|
- `electron`: Electron 框架
|
|||
|
|
- `electron-builder`: 用于打包和分发 Electron 应用
|
|||
|
|
- `wait-on`: 等待服务启动
|
|||
|
|
- `concurrently`: 并行运行多个命令
|
|||
|
|
- `cross-env`: 跨平台环境变量设置
|
|||
|
|
|
|||
|
|
## 可用的脚本命令
|
|||
|
|
|
|||
|
|
### 开发模式
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 启动Electron开发模式（同时启动Vue开发服务器和Electron）
|
|||
|
|
pnpm run electron:dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 构建和打包
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 构建所有平台的安装包
|
|||
|
|
pnpm run electron:build
|
|||
|
|
|
|||
|
|
# 仅构建Windows安装包
|
|||
|
|
pnpm run electron:build:win
|
|||
|
|
|
|||
|
|
# 仅构建macOS安装包
|
|||
|
|
pnpm run electron:build:mac
|
|||
|
|
|
|||
|
|
# 仅构建Linux安装包
|
|||
|
|
pnpm run electron:build:linux
|
|||
|
|
|
|||
|
|
# 构建但不发布
|
|||
|
|
pnpm run electron:dist
|
|||
|
|
|
|||
|
|
# 仅打包（不创建安装包）
|
|||
|
|
pnpm run electron:pack
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 文件结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
├── electron/
|
|||
|
|
│ └── main.js # Electron主进程文件
|
|||
|
|
├── dist/ # Vue构建输出目录
|
|||
|
|
├── dist-electron/ # Electron打包输出目录
|
|||
|
|
└── package.json # 包含Electron配置
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 配置说明
|
|||
|
|
|
|||
|
|
### Electron 主进程 (electron/main.js)
|
|||
|
|
|
|||
|
|
- 创建应用窗口
|
|||
|
|
- 设置窗口属性（大小、图标等）
|
|||
|
|
- 处理菜单和快捷键
|
|||
|
|
- 管理应用生命周期
|
|||
|
|
|
|||
|
|
### Package.json 配置
|
|||
|
|
|
|||
|
|
- `main`: 指定 Electron 主进程文件
|
|||
|
|
- `build`: electron-builder 配置
|
|||
|
|
- 应用 ID 和名称
|
|||
|
|
- 输出目录
|
|||
|
|
- 平台特定配置
|
|||
|
|
- 安装包配置
|
|||
|
|
|
|||
|
|
### Vue 配置
|
|||
|
|
|
|||
|
|
- 根据环境变量调整 publicPath
|
|||
|
|
- 支持 Electron 和 Web 两种部署方式
|
|||
|
|
|
|||
|
|
## 使用说明
|
|||
|
|
|
|||
|
|
1. **开发模式**：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
pnpm run electron:dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
这将启动 Vue 开发服务器，然后启动 Electron 应用。
|
|||
|
|
|
|||
|
|
2. **生产构建**：
|
|||
|
|
```bash
|
|||
|
|
pnpm run electron:build:win
|
|||
|
|
```
|
|||
|
|
构建完成后，安装包将位于 `dist-electron` 目录中。
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
- 确保在构建前先运行 `pnpm run build:prod` 构建 Vue 应用
|
|||
|
|
- 不同平台的构建需要对应的系统环境
|
|||
|
|
- 图标文件路径为 `public/favicon.ico`
|
|||
|
|
- 应用名称：流程自动化机器人
|
|||
|
|
|
|||
|
|
## 故障排除
|
|||
|
|
|
|||
|
|
如果遇到问题，请检查：
|
|||
|
|
|
|||
|
|
1. Node.js 版本是否兼容
|
|||
|
|
2. 所有依赖是否正确安装
|
|||
|
|
3. 端口 8080 是否被占用（开发模式）
|
|||
|
|
4. 构建输出目录权限是否正确
|