236 lines
5.0 KiB
Markdown
236 lines
5.0 KiB
Markdown
# 移动端打包部署指导文档
|
||
|
||
## 📋 项目概述
|
||
|
||
**项目**: 校园管理系统移动端 (mobile/)
|
||
**技术栈**: Vue 2.6.14 + uni-app 2.x + uview-ui 2.0.38
|
||
**打包方式**: Vue CLI 命令行打包（无需HBuilderX）
|
||
|
||
---
|
||
|
||
## 🚀 打包命令详解
|
||
|
||
### 1. H5网页版打包
|
||
```bash
|
||
cd mobile/
|
||
npm run build:h5
|
||
```
|
||
**输出目录**: `mobile/dist/build/h5/`
|
||
**部署方式**: 直接部署到Web服务器（如Nginx）
|
||
|
||
### 2. 微信小程序打包
|
||
```bash
|
||
cd mobile/
|
||
npm run build:mp-weixin
|
||
```
|
||
**输出目录**: `mobile/dist/build/mp-weixin/`
|
||
**后续操作**: 用微信开发者工具导入该目录
|
||
|
||
### 3. App打包
|
||
```bash
|
||
cd mobile/
|
||
npm run build:app-plus
|
||
```
|
||
**输出目录**: `mobile/dist/build/app-plus/`
|
||
**后续操作**:
|
||
- 使用HBuilderX云打包服务
|
||
- 或配置本地Android/iOS打包环境
|
||
|
||
### 4. 其他小程序平台
|
||
```bash
|
||
# 支付宝小程序
|
||
npm run build:mp-alipay
|
||
|
||
# 百度小程序
|
||
npm run build:mp-baidu
|
||
|
||
# 字节跳动小程序
|
||
npm run build:mp-toutiao
|
||
|
||
# QQ小程序
|
||
npm run build:mp-qq
|
||
```
|
||
|
||
---
|
||
|
||
## 🔧 生产环境配置调整
|
||
|
||
### ⚠️ 必须修改的配置项
|
||
|
||
**文件**: `mobile/src/common/config.js`
|
||
|
||
#### 1. 服务器地址配置
|
||
```javascript
|
||
// 后端API服务器地址
|
||
serverUrl: 'https://hzdyjsapi.camasort.com'
|
||
|
||
// API基础路径
|
||
baseURL: 'https://hzdyjsapi.camasort.com'
|
||
|
||
// 前端域名（用于referer）
|
||
referer: 'https://hzdyjs.camasort.com/login?redirect=/index'
|
||
```
|
||
|
||
#### 2. 环境判断逻辑
|
||
- **开发环境**: 使用`/api`代理转发到`http://localhost:8080`
|
||
- **生产环境**: 直接访问`https://hzdyjsapi.camasort.com`
|
||
|
||
### 🔐 加密配置
|
||
- RSA密钥对已配置，与后端保持一致
|
||
- 客户端ID: `e5cd7e4891bf95d1d19206ce24a7b32e`
|
||
- 租户ID: `000000`
|
||
|
||
---
|
||
|
||
## 📦 不同平台部署方案
|
||
|
||
### 1. H5网页版部署
|
||
```bash
|
||
# 1. 打包
|
||
npm run build:h5
|
||
|
||
# 2. 部署到服务器
|
||
scp -r dist/build/h5/* user@server:/var/www/mobile/
|
||
|
||
# 3. Nginx配置示例
|
||
location /mobile {
|
||
alias /var/www/mobile;
|
||
index index.html;
|
||
try_files $uri $uri/ /mobile/index.html;
|
||
}
|
||
```
|
||
|
||
### 2. 微信小程序发布
|
||
```bash
|
||
# 1. 打包
|
||
npm run build:mp-weixin
|
||
|
||
# 2. 用微信开发者工具打开
|
||
# 目录: mobile/dist/build/mp-weixin/
|
||
|
||
# 3. 在微信开发者工具中：
|
||
# - 预览测试
|
||
# - 上传代码
|
||
# - 提交审核
|
||
# - 发布上线
|
||
```
|
||
|
||
### 3. App发布流程
|
||
```bash
|
||
# 1. 打包
|
||
npm run build:app-plus
|
||
|
||
# 2. 使用HBuilderX云打包：
|
||
# - 打开HBuilderX
|
||
# - 导入项目: mobile/dist/build/app-plus/
|
||
# - 选择发行 -> 原生App-云打包
|
||
# - 配置证书和签名
|
||
# - 提交打包
|
||
|
||
# 3. 发布到应用商店：
|
||
# - Android: 上传到各大应用市场
|
||
# - iOS: 上传到App Store Connect
|
||
```
|
||
|
||
---
|
||
|
||
## 🔄 CI/CD自动化部署
|
||
|
||
### GitHub Actions示例
|
||
```yaml
|
||
name: Mobile Deploy
|
||
on:
|
||
push:
|
||
branches: [main]
|
||
paths: ['mobile/**']
|
||
|
||
jobs:
|
||
build-h5:
|
||
runs-on: ubuntu-latest
|
||
steps:
|
||
- uses: actions/checkout@v3
|
||
- uses: actions/setup-node@v3
|
||
with:
|
||
node-version: '18'
|
||
|
||
- name: Install dependencies
|
||
run: |
|
||
cd mobile
|
||
npm ci
|
||
|
||
- name: Build H5
|
||
run: |
|
||
cd mobile
|
||
npm run build:h5
|
||
|
||
- name: Deploy to server
|
||
run: |
|
||
# 部署到服务器的脚本
|
||
scp -r mobile/dist/build/h5/* ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}:/var/www/mobile/
|
||
```
|
||
|
||
---
|
||
|
||
## 📱 多端测试验证
|
||
|
||
### 开发环境测试
|
||
```bash
|
||
# H5开发服务器
|
||
npm run dev:h5
|
||
# 访问: http://localhost:8081
|
||
|
||
# 微信小程序开发
|
||
npm run dev:mp-weixin
|
||
# 用微信开发者工具打开: mobile/dist/dev/mp-weixin/
|
||
```
|
||
|
||
### 生产环境验证
|
||
- **H5版本**: 在浏览器中访问部署地址
|
||
- **小程序**: 通过微信扫码体验版二维码
|
||
- **App**: 通过TestFlight(iOS)或内测分发(Android)
|
||
|
||
---
|
||
|
||
## 🚨 注意事项
|
||
|
||
### 1. 域名配置
|
||
- **后端API**: `https://hzdyjsapi.camasort.com`
|
||
- **前端域名**: `https://hzdyjs.camasort.com`
|
||
- **确保HTTPS证书有效**
|
||
|
||
### 2. 跨域处理
|
||
- 生产环境后端需要配置CORS允许前端域名
|
||
- 或者使用Nginx反向代理统一域名
|
||
|
||
### 3. 小程序特殊要求
|
||
- 微信小程序需要在管理后台配置服务器域名
|
||
- 确保API域名在小程序的request合法域名中
|
||
|
||
### 4. App打包要求
|
||
- Android需要签名证书
|
||
- iOS需要开发者证书和Provisioning Profile
|
||
- 确保manifest.json中的appid已配置
|
||
|
||
---
|
||
|
||
## 📞 问题排查
|
||
|
||
### 常见问题
|
||
1. **API请求失败**: 检查生产环境域名配置
|
||
2. **加密登录失败**: 验证RSA密钥对是否正确
|
||
3. **小程序白屏**: 检查域名是否已添加到合法域名列表
|
||
4. **App打包失败**: 检查证书配置和权限设置
|
||
|
||
### 调试方法
|
||
```javascript
|
||
// 在config.js中添加调试日志
|
||
console.log('当前环境:', process.env.NODE_ENV);
|
||
console.log('API地址:', REQUEST_CONFIG.baseURL);
|
||
console.log('服务器地址:', REQUEST_CONFIG.serverUrl);
|
||
```
|
||
|
||
---
|
||
|
||
**📝 文档维护**: 2025-01-03 创建
|
||
**🔄 更新周期**: 每次部署流程变更时更新
|
||
**👥 适用人员**: 开发人员、运维人员 |