153 lines
4.1 KiB
Markdown
153 lines
4.1 KiB
Markdown
|
# Renderer 代码混淆配置说明
|
|||
|
|
|
|||
|
|
## ⚠️ 白屏问题解决方案
|
|||
|
|
|
|||
|
|
如果使用 `npm run build:win:obfuscated` 出现白屏，这是因为之前的混淆配置过于激进。现在已修复并提供更安全的配置。
|
|||
|
|
|
|||
|
|
### 🛠️ 已修复的问题
|
|||
|
|
- **移除所有unsafe选项**: 避免破坏Vue响应式系统
|
|||
|
|
- **保留函数名和类名**: 确保Vue组件正常工作
|
|||
|
|
- **关闭属性名混淆**: 防止破坏Vue的内部机制
|
|||
|
|
- **保留更多关键标识符**: 包括Vue、Pinia、Naive UI相关的所有重要名称
|
|||
|
|
|
|||
|
|
## 🎯 推荐使用方案
|
|||
|
|
|
|||
|
|
### 安全混淆构建 (推荐)
|
|||
|
|
```bash
|
|||
|
|
npm run build:win:safe
|
|||
|
|
```
|
|||
|
|
这个命令使用新的安全混淆配置，提供基础保护的同时确保应用正常运行。
|
|||
|
|
|
|||
|
|
### 普通构建 (无混淆)
|
|||
|
|
```bash
|
|||
|
|
npm run build:win
|
|||
|
|
```
|
|||
|
|
如果不需要混淆，使用普通构建即可。
|
|||
|
|
|
|||
|
|
## 混淆功能特性
|
|||
|
|
|
|||
|
|
### 安全混淆级别 (OBFUSCATE=true)
|
|||
|
|
- ✅ **变量名混淆**: 将局部变量名转换为短字符
|
|||
|
|
- ✅ **代码压缩**: 移除空格、换行、注释
|
|||
|
|
- ✅ **Console移除**: 移除console.log等调试输出
|
|||
|
|
- ✅ **文件名混淆**: 生成短哈希文件名
|
|||
|
|
- ✅ **保留Vue生态**: 完全兼容Vue、Naive UI、Pinia
|
|||
|
|
- ❌ 属性名混淆: 已禁用，避免破坏响应式
|
|||
|
|
- ❌ Unsafe优化: 已禁用，确保稳定性
|
|||
|
|
|
|||
|
|
## 构建命令对比
|
|||
|
|
|
|||
|
|
| 命令 | 混淆级别 | 安全性 | 兼容性 | 推荐场景 |
|
|||
|
|
|------|----------|--------|--------|----------|
|
|||
|
|
| `npm run build:win` | 无 | 低 | 100% | 开发测试 |
|
|||
|
|
| `npm run build:win:safe` | 安全混淆 | 中等 | 99% | **生产推荐** |
|
|||
|
|
|
|||
|
|
## 验证构建结果
|
|||
|
|
|
|||
|
|
### 1. 检查应用启动
|
|||
|
|
```bash
|
|||
|
|
npm run build:unpack:safe
|
|||
|
|
npm start
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 检查混淆效果
|
|||
|
|
查看 `out/renderer/assets/*.js` 文件：
|
|||
|
|
- 变量名应该是 a, b, c 等短字符
|
|||
|
|
- 代码应该压缩在少数几行
|
|||
|
|
- 不应有console.log输出
|
|||
|
|
|
|||
|
|
### 3. 功能测试
|
|||
|
|
- 所有页面正常显示
|
|||
|
|
- Vue组件响应式正常
|
|||
|
|
- Naive UI组件正常工作
|
|||
|
|
- Electron API正常调用
|
|||
|
|
|
|||
|
|
## 安全保护措施
|
|||
|
|
|
|||
|
|
### 保留的重要标识符
|
|||
|
|
```javascript
|
|||
|
|
// Vue 核心
|
|||
|
|
'Vue', 'vue', 'reactive', 'ref', 'computed', 'watch'
|
|||
|
|
|
|||
|
|
// Vue Router
|
|||
|
|
'router', 'route', 'useRouter', 'useRoute'
|
|||
|
|
|
|||
|
|
// Pinia
|
|||
|
|
'pinia', 'store', 'useStore', 'defineStore'
|
|||
|
|
|
|||
|
|
// Naive UI
|
|||
|
|
'naive', 'NaiveUi', 'useDialog', 'useMessage'
|
|||
|
|
|
|||
|
|
// Electron
|
|||
|
|
'ElectronAPI', 'ipcRenderer', 'contextBridge'
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 禁用的危险选项
|
|||
|
|
```javascript
|
|||
|
|
// 这些选项会破坏Vue，已全部禁用
|
|||
|
|
unsafe: false,
|
|||
|
|
unsafe_comps: false,
|
|||
|
|
unsafe_Function: false,
|
|||
|
|
unsafe_methods: false,
|
|||
|
|
properties: false // 属性名混淆
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 故障排除
|
|||
|
|
|
|||
|
|
### 如果仍然白屏
|
|||
|
|
1. **使用普通构建**:
|
|||
|
|
```bash
|
|||
|
|
npm run build:win
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
2. **检查控制台错误**:
|
|||
|
|
打开开发者工具查看具体错误信息
|
|||
|
|
|
|||
|
|
3. **分步测试**:
|
|||
|
|
```bash
|
|||
|
|
npm run build:unpack:safe # 先构建不打包
|
|||
|
|
npm start # 测试是否正常
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 如果某些功能异常
|
|||
|
|
1. **检查是否有动态属性访问**:
|
|||
|
|
如 `obj[dynamicKey]` 可能需要特殊处理
|
|||
|
|
|
|||
|
|
2. **添加保留名称**:
|
|||
|
|
在 `reserved` 数组中添加相关标识符
|
|||
|
|
|
|||
|
|
3. **临时禁用混淆**:
|
|||
|
|
```bash
|
|||
|
|
npm run build:win # 使用普通构建
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 技术细节
|
|||
|
|
|
|||
|
|
### 混淆配置要点
|
|||
|
|
```javascript
|
|||
|
|
terserOptions: {
|
|||
|
|
compress: {
|
|||
|
|
drop_console: true, // 移除console
|
|||
|
|
keep_fargs: true, // 保留函数参数（Vue需要）
|
|||
|
|
keep_classnames: true, // 保留类名（Vue组件）
|
|||
|
|
keep_fnames: true, // 保留函数名（Vue方法）
|
|||
|
|
unsafe: false // 禁用unsafe优化
|
|||
|
|
},
|
|||
|
|
mangle: {
|
|||
|
|
properties: false, // 不混淆属性名
|
|||
|
|
reserved: [...] // 大量保留名称
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 为什么这样配置
|
|||
|
|
- **Vue响应式系统**依赖属性名不被改变
|
|||
|
|
- **组件系统**需要保留类名和函数名
|
|||
|
|
- **动态属性访问**在混淆后可能失效
|
|||
|
|
- **第三方库集成**需要保留特定标识符
|
|||
|
|
|
|||
|
|
## 结论
|
|||
|
|
|
|||
|
|
新的安全混淆配置在保护代码的同时确保应用稳定运行。虽然混淆强度相比之前有所降低，但对于大多数安全需求已经足够，且避免了白屏等兼容性问题。
|
|||
|
|
|
|||
|
|
**推荐使用**: `npm run build:win:safe`
|