167 lines
4.6 KiB
Markdown
167 lines
4.6 KiB
Markdown
|
# 内网部署优化说明
|
|||
|
|
|
|||
|
|
## 问题诊断
|
|||
|
|
|
|||
|
|
您反馈的"打包成正式包后加载缓慢、图标无法加载"问题，已针对内网环境进行了优化。
|
|||
|
|
|
|||
|
|
## 已完成的优化 ✅
|
|||
|
|
|
|||
|
|
### 1. 网络请求优化
|
|||
|
|
**问题：** 原超时时间30秒太长，内网环境请求失败时等待时间过久
|
|||
|
|
**优化：**
|
|||
|
|
- ✅ 请求超时从 `30秒` 缩短到 `10秒`
|
|||
|
|
- ✅ 重试次数从 `2次` 减少到 `1次`
|
|||
|
|
- ✅ 重试延迟从 `1000ms` 缩短到 `500ms`
|
|||
|
|
|
|||
|
|
**文件：** `utils/request.js`, `utils/config.js`
|
|||
|
|
|
|||
|
|
### 2. App启动优化
|
|||
|
|
**问题：** 启动页等待首页渲染完成才关闭，导致启动慢
|
|||
|
|
**优化：**
|
|||
|
|
- ✅ 启动页配置 `waiting: false`，不等待首页渲染即关闭
|
|||
|
|
- ✅ 提升用户感知的启动速度
|
|||
|
|
|
|||
|
|
**文件：** `manifest.json`
|
|||
|
|
|
|||
|
|
### 3. 打包资源优化
|
|||
|
|
**优化：**
|
|||
|
|
- ✅ 小图标（<10KB）自动内联为base64，减少网络请求
|
|||
|
|
- ✅ 保留console日志便于内网环境调试
|
|||
|
|
- ✅ 代码分块优化，减小首屏加载体积
|
|||
|
|
|
|||
|
|
**文件：** `vite.config.js`
|
|||
|
|
|
|||
|
|
### 4. 环境配置
|
|||
|
|
**优化：**
|
|||
|
|
- ✅ 生产环境自动使用内网IP `192.168.0.106:30091`
|
|||
|
|
- ✅ 无需手动修改配置即可打包
|
|||
|
|
|
|||
|
|
**文件：** `.env.production`
|
|||
|
|
|
|||
|
|
## 可能的问题原因分析
|
|||
|
|
|
|||
|
|
### 场景1: 设备未连接到内网WiFi
|
|||
|
|
**现象：** App加载缓慢或无法加载
|
|||
|
|
**原因：** 设备连接到其他网络，无法访问 `192.168.0.106`
|
|||
|
|
**解决：**
|
|||
|
|
1. 确保设备连接到与服务器相同的局域网
|
|||
|
|
2. 测试网络连通性：在浏览器中访问 `http://192.168.0.106:30091`
|
|||
|
|
|
|||
|
|
### 场景2: 服务器未启动
|
|||
|
|
**现象：** 所有请求超时
|
|||
|
|
**原因：** 后端服务未运行
|
|||
|
|
**解决：**
|
|||
|
|
1. 启动后端服务
|
|||
|
|
2. 确认服务运行在 `30091` 端口
|
|||
|
|
3. 检查防火墙是否允许访问
|
|||
|
|
|
|||
|
|
### 场景3: 首次启动加载资源多
|
|||
|
|
**现象：** 第一次启动慢，后续正常
|
|||
|
|
**原因：** 需要加载用户数据、课程列表等
|
|||
|
|
**这是正常的：** 已优化超时时间，失败会快速反馈
|
|||
|
|
|
|||
|
|
### 场景4: 图标文件问题
|
|||
|
|
**检查清单：**
|
|||
|
|
- [x] static/icon 目录下图标文件完整
|
|||
|
|
- kaoshi.png (1.7KB)
|
|||
|
|
- kecheng.png (4.9KB)
|
|||
|
|
- shouye.png (7.7KB)
|
|||
|
|
- wode.png (6.9KB)
|
|||
|
|
- voice.png (0.4KB)
|
|||
|
|
- [x] 打包时会自动包含这些文件
|
|||
|
|
|
|||
|
|
## 进一步优化建议
|
|||
|
|
|
|||
|
|
### 1. 添加网络检测（推荐）
|
|||
|
|
|
|||
|
|
在App启动时检测网络连通性，提前告知用户：
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
// App.vue onLaunch中添加
|
|||
|
|
async checkNetwork() {
|
|||
|
|
try {
|
|||
|
|
const res = await uni.request({
|
|||
|
|
url: config.API_BASE_URL + '/health',
|
|||
|
|
timeout: 3000
|
|||
|
|
})
|
|||
|
|
if (res.statusCode !== 200) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '网络提示',
|
|||
|
|
content: '请确保已连接到内网WiFi（192.168.0.106）',
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '无法连接服务器',
|
|||
|
|
content: '请检查：\n1. 是否连接到正确的WiFi\n2. 服务器是否已启动\n3. IP地址：192.168.0.106',
|
|||
|
|
showCancel: false
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 添加资源预加载
|
|||
|
|
|
|||
|
|
对于课程详情页的视频等大文件，可以添加预加载逻辑。
|
|||
|
|
|
|||
|
|
### 3. 离线缓存
|
|||
|
|
|
|||
|
|
考虑使用 `uni.setStorage` 缓存课程列表等数据，减少网络请求。
|
|||
|
|
|
|||
|
|
## 测试步骤
|
|||
|
|
|
|||
|
|
### 打包前测试
|
|||
|
|
1. 连接到内网WiFi（192.168.0.106所在网络）
|
|||
|
|
2. 在HBuilderX中运行到真机
|
|||
|
|
3. 测试各项功能是否正常
|
|||
|
|
4. 观察加载速度和图标显示
|
|||
|
|
|
|||
|
|
### 打包测试
|
|||
|
|
1. 使用HBuilderX打包正式版（会自动使用.env.production配置）
|
|||
|
|
2. 安装到测试设备
|
|||
|
|
3. **关键**：确保设备连接到内网WiFi
|
|||
|
|
4. 测试各项功能
|
|||
|
|
|
|||
|
|
### 常见测试问题
|
|||
|
|
**Q: 打包后登录不了？**
|
|||
|
|
A: 检查服务器地址配置，在App设置中可以查看当前服务器地址
|
|||
|
|
|
|||
|
|
**Q: 视频播放不了？**
|
|||
|
|
A:
|
|||
|
|
1. 检查视频文件是否上传到服务器
|
|||
|
|
2. 检查文件路径是否正确（/profile/upload/...）
|
|||
|
|
3. 在浏览器直接访问视频URL测试
|
|||
|
|
|
|||
|
|
**Q: 图标显示异常？**
|
|||
|
|
A:
|
|||
|
|
1. 确认打包时包含了static目录
|
|||
|
|
2. 检查HBuilderX的打包日志
|
|||
|
|
3. 尝试清除缓存重新打包
|
|||
|
|
|
|||
|
|
## 网络要求
|
|||
|
|
|
|||
|
|
### 服务器端
|
|||
|
|
- IP: `192.168.0.106`
|
|||
|
|
- 端口: `30091`
|
|||
|
|
- 必须在局域网内可访问
|
|||
|
|
|
|||
|
|
### 客户端（App）
|
|||
|
|
- 必须连接到与服务器相同的局域网
|
|||
|
|
- WiFi名称建议固定（便于用户识别）
|
|||
|
|
- 建议在App中显示当前服务器地址
|
|||
|
|
|
|||
|
|
## 监控建议
|
|||
|
|
|
|||
|
|
在生产环境中，建议添加：
|
|||
|
|
1. **连接状态指示器** - 显示是否连接到服务器
|
|||
|
|
2. **网络状态监听** - WiFi断开时提示用户
|
|||
|
|
3. **错误日志收集** - 方便排查问题
|
|||
|
|
|
|||
|
|
## 联系方式
|
|||
|
|
|
|||
|
|
如有问题，请提供：
|
|||
|
|
1. 设备连接的网络名称
|
|||
|
|
2. 服务器IP是否可以ping通
|
|||
|
|
3. 具体的错误信息或截图
|