wangjunxiao/tianshu-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 支持win打包

Browse Source
This commit is contained in:
mingyuansi
2026-06-10 14:16:46 +08:00
parent bb289f5438
commit 68312c6137
17 changed files with 2360 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
docs/MIRROR_QUICK_REFERENCE.md Normal file
View File

@@ -0,0 +1,84 @@
# Electron 镜像源快速参考
## 🚀 快速解决
### 已配置完成 ✅
项目已经配置了镜像源，直接打包即可：
```bash
npm run pack:win # Windows
npm run pack:mac # Mac
```
## 📝 配置位置
### 1. 项目根目录 `.npmrc`
```ini
registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
```
### 2. electron 目录 `.npmrc`
```ini
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
registry=https://registry.npmmirror.com
```
### 3. electron/package.json
```json
{
"scripts": {
"pack:win": "cross-env ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ ..."
}
}
```
## 🔍 验证配置
```bash
npm config get electron_mirror
# 应该输出: https://npmmirror.com/mirrors/electron/
```
## 🛠️ 故障排查
### 打包失败？
```bash
# 1. 清除缓存
npm cache clean --force
# 2. 重新安装依赖
cd electron
rm -rf node_modules
npm install
# 3. 重新打包
npm run pack:win
```
### 检查环境变量
```bash
# Windows
echo %ELECTRON_MIRROR%
# Mac/Linux
echo $ELECTRON_MIRROR
```
## 📦 可用镜像源
| 镜像源 | 地址 |
|--------|------|
| 淘宝 | `https://npmmirror.com/mirrors/electron/` |
| 华为云 | `https://mirrors.huaweicloud.com/electron/` |
| 腾讯云 | `https://mirrors.cloud.tencent.com/npm/electron/` |
## 📚 相关文档
- [完整指南](./electron-mirror-setup.md)
- [Electron 官方文档](https://www.electronjs.org/docs)

104
docs/QUICK_REFERENCE.md Normal file
View File

@@ -0,0 +1,104 @@
# Electron 打包快速参考
## 🚀 快速开始
```bash
# 1. 安装依赖
npm install
cd electron && npm install express
# 2. 开发
npm run dev
# 3. 构建
npm run build
# 4. 打包
npm run pack:win # Windows
npm run pack:mac # Mac
```
## 📦 核心特性
| 特性 | 说明 |
|------|------|
| ✅ 零源码修改 | 项目代码无需改动 |
| ✅ 自动端口查找 | 9527-9999 自动切换 |
| ✅ 本地服务器 | Express 提供静态文件 |
| ✅ 跨平台兼容 | 浏览器和 Electron 都能用 |
## 🔧 配置文件
### electron/server.js
```javascript
const START_PORT = 9527 // 起始端口
const MAX_PORT = 9999 // 最大端口
```
### electron/main.js
```javascript
const win = new BrowserWindow({
fullscreen: true,
autoHideMenuBar: true,
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
})
```
## 📁 目录结构
```
dist/ # 构建输出
electron/
├── main.js # 主进程
├── server.js # 本地服务器
└── package.json # Electron 依赖
release/ # 打包输出
```
## 🎯 工作流程
```
开发: Vite (localhost:5173) → 浏览器 ✅
打包: Express (localhost:9527) → Electron ✅
```
## 🐛 常见问题
| 问题 | 解决方案 |
|------|---------|
| 白屏 | 检查 dist 是否复制到 electron |
| 端口冲突 | 系统自动处理，无需干预 |
| 资源加载失败 | 使用绝对路径 `/scenes/...` |
| 开发者工具 | 删除 `openDevTools()` 关闭 |
## 📊 端口查找
```
9527 → 可用 ✅
9528 → 被占用，跳过
9529 → 可用 ✅
...
```
## 🔒 安全建议
```javascript
webPreferences: {
nodeIntegration: false, // ✅ 禁用 Node
contextIsolation: true // ✅ 隔离上下文
}
```
## 📝 注意事项
1. 只监听 `127.0.0.1`，不暴露到外网
2. 应用退出时自动关闭服务器
3. 端口范围耗尽会抛出错误
## 📚 相关文档
- [完整指南](./electron-packaging-guide.md)
- [端口查找](./electron-port-finder.md)

284
docs/electron-mirror-setup.md Normal file
View File

@@ -0,0 +1,284 @@
# Electron 镜像源配置指南
## 问题描述
打包 Electron 应用时，如果未开启翻墙，会出现 "fetch failed" 错误，这是因为 Electron 和相关工具需要从国外的 GitHub releases 下载二进制文件。
## 解决方案
### 方案 1：使用 npm 配置（推荐）
#### 1.1 全局配置
在项目根目录创建 `.npmrc` 文件：
```ini
registry=https://registry.npmmirror.com
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
```
#### 1.2 Electron 目录配置
在 `electron/` 目录创建 `.npmrc` 文件：
```ini
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
registry=https://registry.npmmirror.com
```
### 方案 2：使用环境变量（已配置）
#### 2.1 Windows
在 `electron/package.json` 中已经配置：
```json
{
"scripts": {
"pack:win": "cross-env ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/ node ../scripts/prepare-electron.cjs && npx @electron/packager . MyGame --platform=win32 --arch=x64 --out=../release --overwrite"
}
}
```
#### 2.2 Mac/Linux
```bash
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
export ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
```
### 方案 3：使用批处理脚本
#### Windows
使用 `scripts/pack-win.bat`：
```batch
@echo off
set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
call npm run pack:win
```
#### Mac/Linux
使用 `scripts/pack-mac.sh`：
```bash
#!/bin/bash
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
export ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
npm run pack:mac
```
### 方案 4：使用系统环境变量
#### Windows
```powershell
# 临时设置（当前会话）
set ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
set ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
# 永久设置
setx ELECTRON_MIRROR https://npmmirror.com/mirrors/electron/
setx ELECTRON_BUILDER_BINARIES_MIRROR https://npmmirror.com/mirrors/electron-builder-binaries/
```
#### Mac/Linux
```bash
# 临时设置（当前会话）
export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
export ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
# 永久设置（添加到 ~/.bashrc 或 ~/.zshrc）
echo 'export ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/' >> ~/.bashrc
echo 'export ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/' >> ~/.bashrc
source ~/.bashrc
```
## 验证配置
### 检查 npm 配置
```bash
npm config get electron_mirror
npm config get electron_builder_binaries_mirror
```
应该输出：
```
https://npmmirror.com/mirrors/electron/
https://npmmirror.com/mirrors/electron-builder-binaries/
```
### 检查环境变量
#### Windows
```cmd
echo %ELECTRON_MIRROR%
echo %ELECTRON_BUILDER_BINARIES_MIRROR%
```
#### Mac/Linux
```bash
echo $ELECTRON_MIRROR
echo $ELECTRON_BUILDER_BINARIES_MIRROR
```
## 可用的镜像源
### 淘宝镜像（推荐）
```ini
electron_mirror=https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/
```
### 华为云镜像
```ini
electron_mirror=https://mirrors.huaweicloud.com/electron/
electron_builder_binaries_mirror=https://mirrors.huaweicloud.com/electron-builder-binaries/
```
### 腾讯云镜像
```ini
electron_mirror=https://mirrors.cloud.tencent.com/npm/electron/
```
## 常见问题
### Q1: 配置后仍然失败
**A:** 检查以下几点：
1. 确认配置已生效
2. 清除 npm 缓存：`npm cache clean --force`
3. 删除 node_modules 重新安装：`rm -rf node_modules && npm install`
4. 检查网络连接
### Q2: 某些包仍然需要翻墙
**A:** 可能是其他依赖包的问题，可以：
1. 检查具体的错误信息
2. 使用 `.npmrc` 配置其他镜像源
3. 手动下载相关包
### Q3: 下载速度慢
**A:** 可以尝试：
1. 更换其他镜像源
2. 使用 CDN 加速
3. 使用代理
### Q4: 如何恢复默认配置
**A:** 删除或注释掉 `.npmrc` 中的相关配置：
```bash
npm config delete electron_mirror
npm config delete electron_builder_binaries_mirror
```
## 完整的打包流程
### 1. 首次配置
```bash
# 安装依赖
npm install
cd electron
npm install
# 配置镜像源（已在 .npmrc 中配置）
# 无需额外操作
```
### 2. 日常打包
```bash
# Windows
npm run pack:win
# Mac
npm run pack:mac
```
### 3. 故障排查
如果打包失败：
```bash
# 1. 检查配置
npm config get electron_mirror
# 2. 清除缓存
npm cache clean --force
# 3. 重新安装依赖
cd electron
rm -rf node_modules
npm install
# 4. 重新打包
npm run pack:win
```
## 其他工具的镜像配置
### yarn
```bash
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/
yarn config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/
```
### pnpm
```bash
pnpm config set electron_mirror https://npmmirror.com/mirrors/electron/
pnpm config set electron_builder_binaries_mirror https://npmmirror.com/mirrors/electron-builder-binaries/
```
## 性能优化
### 1. 使用缓存
Electron 下载的二进制文件会被缓存，后续打包会更快：
```bash
# 查看缓存位置
npm config get cache
# Windows: C:\Users\<username>\AppData\Roaming\npm-cache
# Mac: ~/.npm
# Linux: ~/.npm
```
### 2. 离线模式
如果已经下载过 Electron，可以设置离线模式：
```bash
export ELECTRON_BUILDER_CACHE=~/.electron
```
## 总结
通过配置镜像源，你可以在不翻墙的情况下成功打包 Electron 应用。推荐使用：
1. **`.npmrc` 配置** - 最简单，一次配置永久生效
2. **环境变量** - 灵活，可以针对不同项目配置
3. **批处理脚本** - 方便，可以一键打包
现在你可以愉快地打包 Electron 应用了！🎉

269
docs/electron-packaging-guide.md Normal file
View File

@@ -0,0 +1,269 @@
# Electron 打包完整指南
## 概述
本指南介绍如何将 Vue/HTML 项目打包成 Electron 应用，采用**本地服务器方案**，无需修改源码。
## 核心优势
✅ **零源码修改** - 项目代码完全不需要改动
✅ **自动端口查找** - 自动处理端口冲突（9527-9999）
✅ **跨平台兼容** - 浏览器和 Electron 都能正常工作
✅ **易于维护** - 打包逻辑集中在 Electron 目录
✅ **性能优秀** - 本地服务器响应快速
## 项目结构
```
branch-engine/
├── dist/ # 构建输出目录
├── electron/ # Electron 相关文件
│ ├── main.js # 主进程入口
│ ├── server.js # 本地服务器
│ └── package.json # Electron 依赖
├── scripts/
│ ├── prepare-electron.cjs # 打包前准备
│ └── pack-html.cjs # HTML 打包
├── src/ # Vue 源码
├── editor/ # 编辑器
└── package.json # 主项目配置
```
## 工作原理
### 开发环境
```
npm run dev
↓
Vite 开发服务器 (localhost:5173)
↓
浏览器访问 → 正常工作 ✅
```
### 打包环境
```
npm run pack:win
↓
1. npm run build (生成 dist)
2. 复制 dist 到 electron
3. 启动 Express 服务器 (localhost:9527-9999)
4. Electron 加载 http://127.0.0.1:PORT ✅
```
## 详细步骤
### 1. 安装依赖
```bash
# 主项目依赖
npm install
# Electron 依赖
cd electron
npm install express
```
### 2. 开发
```bash
# 启动开发服务器
npm run dev
```
### 3. 构建
```bash
# 构建 Vue 项目
npm run build
```
### 4. 打包
```bash
# 打包 Windows 版本
npm run pack:win
# 打包 Mac 版本
npm run pack:mac
```
### 5. 运行
打包完成后，在 `release/` 目录下找到生成的应用：
- Windows: `release/MyGame-win32-x64/MyGame.exe`
- Mac: `release/MyGame-mas-x64/MyGame.app`
## 核心文件说明
### electron/main.js
主进程入口，负责：
- 启动本地服务器
- 创建浏览器窗口
- 加载应用
- 处理应用生命周期
### electron/server.js
本地服务器，负责：
- 自动查找可用端口（9527-9999）
- 提供静态文件服务
- 处理资源请求
### scripts/prepare-electron.cjs
打包前准备脚本，负责：
- 将 dist 目录复制到 electron
- 验证构建文件
## 端口自动查找
### 功能特性
- 起始端口：9527
- 最大端口：9999
- 自动检测：逐个检测端口可用性
- 冲突处理：自动跳过被占用的端口
### 使用示例
#### 正常情况
```
✅ Local server running at http://127.0.0.1:9527
🚀 Loading app from: http://127.0.0.1:9527/index.html
```
#### 端口冲突
```
🔒 Port 9527 is blocked
✅ Local server running at http://127.0.0.1:9528
🚀 Loading app from: http://127.0.0.1:9528/index.html
```
## 配置选项
### 修改端口范围
编辑 `electron/server.js`:
```javascript
const START_PORT = 9527 // 起始端口
const MAX_PORT = 9999 // 最大端口
```
### 修改窗口配置
编辑 `electron/main.js`:
```javascript
const win = new BrowserWindow({
fullscreen: true, // 全屏模式
autoHideMenuBar: true, // 隐藏菜单栏
webPreferences: {
nodeIntegration: false, // 禁用 node 集成
contextIsolation: true // 启用上下文隔离
}
})
```
## 常见问题
### Q1: 打包后白屏
**A:** 检查 dist 目录是否正确复制到 electron 目录。
### Q2: 端口被占用
**A:** 系统会自动查找下一个可用端口，无需手动处理。
### Q3: 资源加载失败
**A:** 确保使用绝对路径（如 `/scenes/config.json`），本地服务器会正确处理。
### Q4: 开发者工具如何关闭
**A:** 删除 `electron/main.js` 中的 `win.webContents.openDevTools()` 行。
### Q5: 如何添加应用图标
**A:** 在打包配置中添加图标文件路径。
## 性能优化
### 1. 减小包体积
```bash
# 使用 electron-builder 替代 electron-packager
npm install --save-dev electron-builder
```
### 2. 启用代码压缩
在 `vite.config.ts` 中配置：
```typescript
build: {
minify: 'terser',
terserOptions: {
compress: {
drop_console: true
}
}
}
```
### 3. 优化资源加载
- 使用 CDN 加载第三方库
- 启用 gzip 压缩
- 懒加载非关键资源
## 安全建议
1. **禁用 Node 集成**
```javascript
webPreferences: {
nodeIntegration: false,
contextIsolation: true
}
```
2. **只监听本地地址**
```javascript
server.listen(PORT, '127.0.0.1')
```
3. **验证用户输入**
- 检查 URL 参数
- 验证文件路径
- 防止 XSS 攻击
## 调试技巧
### 查看服务器日志
```javascript
console.log('Server started on port:', PORT)
```
### 查看网络请求
打开开发者工具 → Network 标签，查看所有请求。
### 查看控制台错误
打开开发者工具 → Console 标签，查看错误信息。
## 部署建议
### 1. 代码签名
```bash
# Windows
electron-builder --win --x64 --publish never
# Mac
electron-builder --mac --x64 --publish never
```
### 2. 自动更新
使用 `electron-updater` 实现自动更新功能。
### 3. 安装包配置
在 `electron-builder.yml` 中配置安装选项。
## 总结
本方案采用**本地服务器 + 自动端口查找**的方式，完美解决了 Electron 打包中的路径问题，同时保持了源码的纯净性。这是一个简单、优雅、可维护的解决方案。
## 相关文档
- [Electron 官方文档](https://www.electronjs.org/docs)
- [Express 文档](https://expressjs.com/)
- [Vite 文档](https://vitejs.dev/)

107
docs/electron-port-finder.md Normal file
View File

@@ -0,0 +1,107 @@
# Electron 端口自动查找功能
## 功能说明
Electron 应用启动时会自动在 9527-9999 端口范围内寻找可用端口，避免端口冲突问题。
## 工作原理
### 1. 端口检测
使用 Node.js 内置的 `net` 模块检测端口是否可用：
```javascript
function isPortAvailable(port) {
return new Promise((resolve) => {
const server = net.createServer()
server.listen(port, '127.0.0.1', () => {
server.once('close', () => resolve(true))
server.close()
})
server.on('error', () => resolve(false))
})
}
```
### 2. 端口查找
从 9527 开始向上查找，直到找到可用端口：
```javascript
async function findAvailablePort(startPort, maxPort) {
for (let port = startPort; port <= maxPort; port++) {
const available = await isPortAvailable(port)
if (available) {
return port
}
}
throw new Error(`No available port found between ${startPort} and ${maxPort}`)
}
```
### 3. 服务器启动
找到可用端口后启动 Express 服务器：
```javascript
const serverInfo = await startServer()
const { server, PORT } = serverInfo
```
## 配置参数
| 参数 | 默认值 | 说明 |
|------|--------|------|
| `START_PORT` | 9527 | 起始端口 |
| `MAX_PORT` | 9999 | 最大端口 |
## 使用示例
### 正常情况
```
✅ Local server running at http://127.0.0.1:9527
🚀 Loading app from: http://127.0.0.1:9527/index.html
```
### 端口冲突情况
```
🔒 Port 9527 is blocked
✅ Local server running at http://127.0.0.1:9528
🚀 Loading app from: http://127.0.0.1:9528/index.html
```
## 优势
1. **自动处理冲突** - 无需手动指定端口
2. **范围可控** - 限制在 9527-9999 范围内
3. **快速响应** - 端口检测速度快
4. **零依赖** - 使用 Node.js 内置模块
## 注意事项
1. **端口范围** - 如果 9527-9999 都被占用，会抛出错误
2. **监听地址** - 只监听 `127.0.0.1`，不暴露到外网
3. **服务器关闭** - 应用退出时会自动关闭服务器
## 测试
### 测试端口查找
```bash
node scripts/test-port-finder.cjs
```
### 测试端口冲突
```bash
node scripts/test-port-conflict.cjs
```
## 故障排查
### 端口范围耗尽
如果出现 "No available port found" 错误：
1. 检查是否有其他应用占用了大量端口
2. 增加 `MAX_PORT` 的值
3. 关闭不必要的应用释放端口
### 服务器启动失败
如果服务器启动失败：
1. 检查 dist 目录是否存在
2. 检查文件权限
3. 查看控制台错误信息

237
docs/electron-window-controls.md Normal file
View File

@@ -0,0 +1,237 @@
# Electron 窗口控制指南
## 窗口功能
### 基本控制
| 功能 | 操作 |
|------|------|
| 调整大小 | 拖动窗口边缘 |
| 最小化 | 点击窗口右上角的 `-` 按钮 |
| 最大化 | 点击窗口右上角的 `□` 按钮 |
| 还原 | 再次点击最大化按钮 |
| 关闭 | 点击窗口右上角的 `×` 按钮 |
### 快捷键
| 快捷键 | 功能 |
|--------|------|
| `F11` | 切换全屏模式 |
| `Alt + F4` | 退出应用 |
| `Alt + F4` (Mac) | `Cmd + Q` |
## 窗口配置
### 当前设置
```javascript
{
width: 1280, // 初始宽度
height: 720, // 初始高度
minWidth: 800, // 最小宽度
minHeight: 600, // 最小高度
resizable: true, // 允许调整大小
maximizable: true, // 允许最大化
minimizable: true, // 允许最小化
closable: true, // 允许关闭
autoHideMenuBar: false // 显示菜单栏
}
```
### 自定义窗口大小
如果你想修改默认窗口大小，编辑 `electron/main.js`：
```javascript
const win = new BrowserWindow({
width: 1920, // 修改为你想要的宽度
height: 1080, // 修改为你想要的高度
minWidth: 1024, // 修改为你想要的最小宽度
minHeight: 768, // 修改为你想要的最小高度
// ... 其他配置
})
```
### 启动时最大化
如果你希望应用启动时自动最大化，修改 `electron/main.js`：
```javascript
const win = new BrowserWindow({
// ... 其他配置
})
// 在创建窗口后添加
win.maximize()
```
### 启动时全屏
如果你希望应用启动时全屏，修改 `electron/main.js`：
```javascript
const win = new BrowserWindow({
// ... 其他配置
fullscreen: true // 启用全屏
})
```
## 菜单栏
应用会显示 Electron 默认菜单栏，包含以下菜单：
### File 菜单
- **New Window** - 打开新窗口
- **Close** - 关闭当前窗口
- **Quit** - 退出应用
### Edit 菜单
- **Undo** - 撤销
- **Redo** - 重做
- **Cut** - 剪切
- **Copy** - 复制
- **Paste** - 粘贴
- **Select All** - 全选
### View 菜单
- **Reload** - 重新加载页面
- **Force Reload** - 强制重新加载
- **Toggle Developer Tools** - 切换开发者工具
- **Toggle Full Screen** - 切换全屏
- **Zoom In** - 放大
- **Zoom Out** - 缩小
- **Reset Zoom** - 重置缩放
### Window 菜单
- **Minimize** - 最小化
- **Zoom** - 最大化/还原
- **Front** - 置顶
## 隐藏菜单栏
如果你想隐藏菜单栏，修改 `electron/main.js`：
```javascript
const win = new BrowserWindow({
// ... 其他配置
autoHideMenuBar: true // 隐藏菜单栏
})
```
## 自定义菜单栏
如果你想创建自定义菜单，在 `electron/main.js` 中添加：
```javascript
const { Menu } = require('electron')
const template = [
{
label: '游戏',
submenu: [
{ label: '新游戏', click: () => { /* 新游戏逻辑 */ } },
{ label: '继续游戏', click: () => { /* 继续游戏逻辑 */ } },
{ type: 'separator' },
{ label: '退出', click: () => app.quit() }
]
},
{
label: '设置',
submenu: [
{ label: '全屏', click: () => { win.setFullScreen(!win.isFullScreen()) } },
{ label: '开发者工具', click: () => { win.webContents.toggleDevTools() } }
]
}
]
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)
```
## 窗口状态保存
如果你想记住窗口的大小和位置，可以使用以下代码：
```javascript
const Store = require('electron-store')
const store = new Store()
app.whenReady().then(async () => {
// 获取保存的窗口状态
const windowState = store.get('windowState', {
width: 1280,
height: 720,
x: undefined,
y: undefined
})
const win = new BrowserWindow({
width: windowState.width,
height: windowState.height,
x: windowState.x,
y: windowState.y,
// ... 其他配置
})
// 保存窗口状态
win.on('close', () => {
const bounds = win.getBounds()
store.set('windowState', {
width: bounds.width,
height: bounds.height,
x: bounds.x,
y: bounds.y
})
})
})
```
## 边框窗口
如果你想要无边框窗口，修改 `electron/main.js`：
```javascript
const win = new BrowserWindow({
frame: false, // 无边框
transparent: true, // 透明背景
// ... 其他配置
})
```
注意：无边框窗口需要你自己实现窗口控制按钮。
## 常见问题
### Q: 如何在应用内切换全屏？
A: 按 `F11` 键或通过菜单栏 `View` → `Toggle Full Screen`
### Q: 如何隐藏开发者工具？
A: 删除 `electron/main.js` 中的 `win.webContents.openDevTools()` 行
### Q: 如何设置应用图标？
A: 在 `electron/main.js` 中设置 `icon` 选项
### Q: 如何防止用户调整窗口大小？
A: 设置 `resizable: false`
### Q: 如何设置窗口最小尺寸？
A: 设置 `minWidth` 和 `minHeight` 选项
## 性能建议
1. **合理的初始大小** - 设置合适的默认窗口大小
2. **最小尺寸限制** - 防止窗口过小导致内容无法显示
3. **响应式设计** - 确保应用在不同窗口尺寸下都能正常工作
4. **窗口状态保存** - 保存用户的首选窗口大小和位置
## 总结
现在你的应用具有完整的窗口控制功能：
- ✅ 可调整大小
- ✅ 可最小化
- ✅ 可最大化
- ✅ 可关闭
- ✅ 快捷键支持
- ✅ 菜单栏支持
用户可以根据自己的喜好自由调整窗口大小和全屏模式！

141
docs/mirror-setup-summary.md Normal file
View File

@@ -0,0 +1,141 @@
# ✅ Electron 镜像源配置完成
## 🎉 问题已解决
你的项目已经成功配置了国内镜像源，**无需翻墙即可打包**！
## 📋 配置清单
### ✅ 已配置的文件
1. **项目根目录 `.npmrc`**
- ✅ npm 镜像源：淘宝镜像
- ✅ Electron 镜像源：淘宝镜像
- ✅ Electron Builder 镜像源：淘宝镜像
2. **electron 目录 `.npmrc`**
- ✅ Electron 镜像源：淘宝镜像
- ✅ Electron Builder 镜像源：淘宝镜像
- ✅ npm 镜像源：淘宝镜像
3. **electron/package.json**
- ✅ 安装了 `cross-env` 包
- ✅ 打包脚本中设置了环境变量
4. **辅助脚本**
- ✅ `scripts/verify-mirrors.cjs` - 验证镜像源配置
- ✅ `scripts/pack-win.bat` - Windows 打包脚本
- ✅ `scripts/pack-mac.sh` - Mac 打包脚本
## 🔍 验证结果
```bash
✅ npm 配置:
registry: https://registry.npmmirror.com
electron_mirror: https://npmmirror.com/mirrors/electron/
electron_builder_binaries_mirror: https://npmmirror.com/mirrors/electron-builder-binaries/
✅ 已配置国内镜像源，无需翻墙即可打包！
```
## 🚀 现在可以直接打包
### Windows
```bash
npm run pack:win
```
### Mac
```bash
npm run pack:mac
```
## 📝 工作原理
### 之前（需要翻墙）
```
npm run pack:win
↓
下载 Electron 二进制文件
↓
访问 GitHub releases (github.com)
↓
❌ 失败：fetch failed
```
### 现在（无需翻墙）
```
npm run pack:win
↓
下载 Electron 二进制文件
↓
访问淘宝镜像 (npmmirror.com)
↓
✅ 成功：打包完成
```
## 🛠️ 配置详情
### 镜像源地址
| 资源 | 原地址 | 镜像地址 |
|------|--------|---------|
| Electron | github.com/electron/electron/releases | npmmirror.com/mirrors/electron/ |
| Electron Builder | github.com/electron-userland/electron-builder-binaries | npmmirror.com/mirrors/electron-builder-binaries/ |
| npm | registry.npmjs.org | registry.npmmirror.com |
### 环境变量
打包时会自动设置以下环境变量：
```bash
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
```
## 🔧 如果仍然失败
### 1. 清除缓存
```bash
npm cache clean --force
```
### 2. 重新安装依赖
```bash
cd electron
rm -rf node_modules
npm install
```
### 3. 验证配置
```bash
node scripts/verify-mirrors.cjs
```
### 4. 检查网络
确保能访问：
- https://npmmirror.com
- https://mirrors.huaweicloud.com
- https://mirrors.cloud.tencent.com
## 📚 相关文档
- [完整配置指南](./electron-mirror-setup.md)
- [快速参考](./MIRROR_QUICK_REFERENCE.md)
## 🎯 总结
通过配置国内镜像源，你现在已经可以：
✅ **无需翻墙** - 直接打包 Electron 应用
✅ **快速下载** - 使用国内 CDN，速度快
✅ **稳定可靠** - 镜像源稳定，不易中断
✅ **一次配置** - 配置一次，永久生效
现在你可以愉快地打包 Electron 应用了！🎉