移动端打包部署指导文档

📋 项目概述

项目: 校园管理系统移动端 (mobile/)
技术栈: Vue 2.6.14 + uni-app 2.x + uview-ui 2.0.38
打包方式: Vue CLI 命令行打包（无需HBuilderX）

🚀 打包命令详解

1. H5网页版打包

cd mobile/
npm run build:h5

输出目录: mobile/dist/build/h5/
部署方式: 直接部署到Web服务器（如Nginx）

2. 微信小程序打包

cd mobile/
npm run build:mp-weixin

输出目录: mobile/dist/build/mp-weixin/
后续操作: 用微信开发者工具导入该目录

3. App打包

cd mobile/
npm run build:app-plus

输出目录: mobile/dist/build/app-plus/
后续操作:

使用HBuilderX云打包服务
或配置本地Android/iOS打包环境

4. 其他小程序平台

# 支付宝小程序
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. 服务器地址配置

// 后端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网页版部署

# 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. 微信小程序发布

# 1. 打包
npm run build:mp-weixin

# 2. 用微信开发者工具打开
# 目录: mobile/dist/build/mp-weixin/

# 3. 在微信开发者工具中：
# - 预览测试
# - 上传代码
# - 提交审核
# - 发布上线

3. App发布流程

# 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示例

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/

📱 多端测试验证

开发环境测试

# 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已配置

📞 问题排查

常见问题

API请求失败: 检查生产环境域名配置
加密登录失败: 验证RSA密钥对是否正确
小程序白屏: 检查域名是否已添加到合法域名列表
App打包失败: 检查证书配置和权限设置

调试方法

// 在config.js中添加调试日志
console.log('当前环境:', process.env.NODE_ENV);
console.log('API地址:', REQUEST_CONFIG.baseURL);
console.log('服务器地址:', REQUEST_CONFIG.serverUrl);

📝 文档维护: 2025-01-03 创建
🔄 更新周期: 每次部署流程变更时更新
👥 适用人员: 开发人员、运维人员

mobile-deployment-guide.md 5.0 KB Permalink Riwayat Mentahan